1

lzhe

2024-03-29 85a0bba3b54036fe0652d5188274cb1cf9000306

1

 src/views/console/authority/role/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,170 @@
<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
                <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
                <el-button type="primary" plain :disabled="selection.length!=1" @click="permission">权限设置</el-button>
            </div>
            <div class="right-panel">
                <div class="right-panel-search">
                    <el-input v-model="search.keyword" placeholder="角色名称" clearable></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="#" type="index" width="50"></el-table-column>
                <el-table-column label="角色名称" prop="label" width="150"></el-table-column>
                <el-table-column label="排序" prop="sort" width="80"></el-table-column>
                <el-table-column label="操作" fixed="right" align="right" width="170">
                    <template #default="scope">
                        <el-button-group>
                            <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
                            <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                            <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button text type="primary" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>

            </scTable>
        </el-main>
    </el-container>

    <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>

    <permission-dialog v-if="dialog.permission" ref="permissionDialog" @closed="dialog.permission=false"></permission-dialog>

</template>

<script>
    import saveDialog from './save'
    import permissionDialog from './permission'

    export default {
        name: 'role',
        components: {
            saveDialog,
            permissionDialog
        },
        data() {
            return {
                dialog: {
                    save: false,
                    permission: false
                },
                //apiObj: this.$API.system.role.list,
                apiObj: "",
                selection: [],
                search: {
                    keyword: null
                }
            }
        },
        methods: {
            //添加
            add(){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open()
                })
            },
            //编辑
            table_edit(row){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('edit').setData(row)
                })
            },
            //查看
            table_show(row){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('show').setData(row)
                })
            },
            //权限设置
            permission(){
                this.dialog.permission = true
                this.$nextTick(() => {
                    this.$refs.permissionDialog.open()
                })
            },
            //删除
            async table_del(row){
                var reqData = {id: row.id}
                var res = await this.$API.demo.post.post(reqData);
                if(res.code == 200){
                    this.$refs.table.refresh()
                    this.$message.success("删除成功")
                }else{
                    this.$alert(res.message, "提示", {type: 'error'})
                }
            },
            //批量删除
            async batch_del(){
                this.$confirm(`确定删除选中的 ${this.selection.length} é¡¹å—？如果删除项中含有子集将会被一并删除`, '提示', {
                    type: 'warning'
                }).then(() => {
                    const loading = this.$loading();
                    this.$refs.table.refresh()
                    loading.close();
                    this.$message.success("操作成功")
                }).catch(() => {

                })
            },
            //表格选择后回调事件
            selectionChange(selection){
                this.selection = selection;
            },
            //表格内开关
            changeSwitch(val, row){
                row.status = row.status == '1'?'0':'1'
                row.$switch_status = true;
                setTimeout(()=>{
                    delete row.$switch_status;
                    row.status = val;
                    this.$message.success("操作成功")
                }, 500)
            },
            //搜索
            upsearch(){

            },
            //根据ID获取树结构
            filterTree(id){
                var target = null;
                function filter(tree){
                    tree.forEach(item => {
                        if(item.id == id){
                            target = item
                        }
                        if(item.children){
                            filter(item.children)
                        }
                    })
                }
                filter(this.$refs.table.tableData)
                return target
            },
            //本地更新数据
            handleSaveSuccess(data, mode){
                if(mode=='add'){
                    this.$refs.table.refresh()
                }else if(mode=='edit'){
                    this.$refs.table.refresh()
                }
            }
        }
    }
</script>

<style>
</style>

 src/views/console/authority/role/permission.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,151 @@
<template>
    <el-dialog title="角色权限设置" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
        <el-tabs tab-position="top">
            <el-tab-pane label="菜单">
                <div class="treeMain">
                    <el-tree ref="menu" node-key="name" :data="menu.list" :props="menu.props" show-checkbox></el-tree>
                </div>
            </el-tab-pane>
            <el-tab-pane label="卡片">
                <div class="treeMain">
                    <el-tree ref="grid" node-key="key" :data="grid.list" :props="grid.props" :default-checked-keys="grid.checked" show-checkbox></el-tree>
                </div>
            </el-tab-pane>
        </el-tabs>
        <template #footer>
            <el-button @click="visible=false" >取 æ¶ˆ</el-button>
            <el-button type="primary" :loading="isSaveing" @click="submit()">保 å­˜</el-button>
        </template>
    </el-dialog>
</template>

<script>
    export default {
        emits: ['success', 'closed'],
        data() {
            return {
                visible: false,
                isSaveing: false,
                menu: {
                    list: [],
                    checked: [],
                    props: {
                        label: (data)=>{
                            return data.meta.title
                        }
                    }
                },
                grid: {
                    list: [],
                    checked: ["welcome", "ver", "time", "progress", "echarts", "about"],
                    props: {
                        label: (data)=>{
                            return data.title
                        },
                        disabled: (data)=>{
                            return data.isFixed
                        }
                    }
                },
                data: {
                    dataType :"1",
                    list: [],
                    checked: [],
                    props: {},
                    rule: ""
                },
                dashboard: "0",
                dashboardOptions: [
                    {
                        value: '0',
                        label: '数据统计',
                        views: 'stats'

                    },
                    {
                        value: '1',
                        label: '工作台',
                        views: 'work'
                    },
                ]
            }
        },
        mounted() {
            // this.getMenu()
            // this.getDept()
            // this.getGrid()
        },
        methods: {
            open(){
                this.visible = true;
            },
            submit(){
                this.isSaveing = true;

                //选中的和半选的合并后传值接口
                var checkedKeys = this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys())
                console.log(checkedKeys)

                var checkedKeys_dept = this.$refs.dept.getCheckedKeys().concat(this.$refs.dept.getHalfCheckedKeys())
                console.log(checkedKeys_dept)

                setTimeout(()=>{
                    this.isSaveing = false;
                    this.visible = false;
                    this.$message.success("操作成功")
                    this.$emit('success')
                },1000)
            },
            async getMenu(){
                var res = await this.$API.system.menu.list.get()
                this.menu.list = res.data

                //获取接口返回的之前选中的和半选的合并，处理过滤掉有叶子节点的key
                this.menu.checked = ["system", "user", "user.add", "user.edit", "user.del", "directive.edit", "other", "directive"]
                this.$nextTick(() => {
                    let filterKeys = this.menu.checked.filter(key => this.$refs.menu.getNode(key).isLeaf)
                    this.$refs.menu.setCheckedKeys(filterKeys, true)
                })
            },
            async getDept(){
                var res = await this.$API.system.dept.list.get();
                this.data.list = res.data
                this.data.checked = ["12", "2", "21", "22", "1"]
                this.$nextTick(() => {
                    let filterKeys = this.data.checked.filter(key => this.$refs.dept.getNode(key).isLeaf)
                    this.$refs.dept.setCheckedKeys(filterKeys, true)
                })
            },
            getGrid(){
                this.grid.list = [
                    {
                        key: "welcome",
                        title: "主数据",
                        isFixed: true
                    },
                    {
                        key: "ver",
                        title: "采集分析",
                        isFixed: true
                    },
                    {
                        key: "time",
                        title: "生产工艺"
                    },
                    {
                        key: "progress",
                        title: "数字看板"
                    },
                    {
                        key: "echarts",
                        title: "配置中心"
                    }
                ]
            }
        }
    }
</script>

<style scoped>
    .treeMain {height:280px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
</style>

 src/views/console/authority/role/save.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,106 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-03-29 16:39:16
 * @FilePath: /smart-web/src/views/console/authority/role/save.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
            <el-form-item label="角色名称" prop="label">
                <el-input v-model="form.label" clearable></el-input>
            </el-form-item>
            <el-form-item label="角色排序" prop="sort">
                <el-input-number v-model="form.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="visible=false" >取 æ¶ˆ</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">ç¡® å®š</el-button>
        </template>
    </el-dialog>
</template>

<script>
    export default {
        emits: ['success', 'closed'],
        data() {
            return {
                mode: "add",
                titleMap: {
                    add: '新增',
                    edit: '编辑',
                    show: '查看'
                },
                visible: false,
                isSaveing: false,
                //表单数据
                form: {
                    id:"",
                    label: "",
                    alias: "",
                    sort: 1,
                    status: 1,
                    remark: ""
                },
                //验证规则
                rules: {
                    sort: [
                        {required: true, message: '请输入排序', trigger: 'change'}
                    ],
                    label: [
                        {required: true, message: '请输入角色名称'}
                    ],
                    alias: [
                        {required: true, message: '请输入角色别名'}
                    ]
                }
            }
        },
        mounted() {

        },
        methods: {
            //显示
            open(mode='add'){
                this.mode = mode;
                this.visible = true;
                return this
            },
            //表单提交方法
            submit(){
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
                        var res = await this.$API.demo.post.post(this.form);
                        this.isSaveing = false;
                        if(res.code == 200){
                            this.$emit('success', this.form, this.mode)
                            this.visible = false;
                            this.$message.success("操作成功")
                        }else{
                            this.$alert(res.message, "提示", {type: 'error'})
                        }
                    }
                })
            },
            //表单注入数据
            setData(data){
                this.form.id = data.id
                this.form.label = data.label
                this.form.alias = data.alias
                this.form.sort = data.sort
                this.form.status = data.status
                this.form.remark = data.remark

                //可以和上面一样单个注入，也可以像下面一样直接合并进去
                //Object.assign(this.form, data)
            }
        }
    }
</script>

<style>
</style>

 src/views/console/soam/oss-system.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,161 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-03-29 18:27:53
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="oss-main">
        <el-tabs tab-position="left" style="height: 800px" class="demo-tabs">
            <el-tab-pane label="文件存储">
                <div class="tabTitle">文件存储</div>
                <el-form :model="ossForm" ref="ossForm" label-width="120px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="endpoint" prop="endpoint">
                                <el-input v-model="ossForm.endpoint" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="acceskey" prop="acceskey">
                                <el-input v-model="ossForm.acceskey" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="secretkey" prop="secretkey">
                                <el-input v-model="ossForm.secretkey" clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="">
                                <el-button type="primary" @click="ossUpdata">更新</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="应用设置">
                <div class="tabTitle">应用设置</div>
                <ul class="show-list">
                    <li class="active">
                        <div class="edit">编辑</div>
                        <div class="logo">
                            <img src="http://116.63.155.153:83/api/static/images/cps.png">
                        </div>
                        <div class="content">
                            <div class="name">CPS</div>
                            <div class="domain">http://192.168.1.199</div>
                        </div>
                    </li>
                    <li>2</li>
                    <li>3</li>
                </ul>
                <el-form label-width="80px">
					
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        name: "oss-main",
        data(){
            return {
                ossForm: {
                    endpoint: "",
                    acceskey: "",
                    secretkey: ""
                }
            }
        },
        components: {},
        created(){
			
        },
        mounted(){
			
        },
        methods: {
            ossUpdata(){
				
            }
        }
    }
</script>

<style scoped>
.oss-main {
    margin: 8px;
    padding: 8px;
    background-color: #fff;;
}
.tabTitle {
    font-size: 14px;
    border-bottom: 1px solid #ebebeb;
    padding: 10px 0 20px 0;
    margin-bottom: 20px;
}
.show-list {
    display: flex;
    justify-content: space-around;
}
.show-list li {
    list-style: none;
    margin-bottom: 10px;
    float: left;
    width: 30%;
    height: 100px;
    border-radius: 2px;
    background: #fff;
    margin-right: 24px;
    border: 1px solid #d4d4d5;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 16px;
    position: relative;
}
.show-list li.active {
    border: 1px solid #317d7b;
}
.show-list li .edit {
    position: absolute;
    top: 18px;
    right: 16px;
    font-size: 14px;
    color: #3b8e8e;
}
.show-list li .logo {
    width: 66px;
    height: 66px;
    margin-right: 14px;
}
.show-list li .logo img{
    width: 66px;
    height: 66px;
}
.show-list li .lcontent .name{
    font-weight: 700;
    font-size: 18px;
    line-height: 23px;
    color: #000;
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.show-list li .lcontent .domain{
    font-size: 14px;
    margin-top: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, .8);
    line-height: 18px;
    width: 200px;
    word-wrap: break-word;
    word-break: break-all;
}
</style>

 src/views/console/system/SubitemAddDict.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,179 @@
<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="120px" label-position="center">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="字典编号" prop="userName">
                        <el-input v-model="form.userName" placeholder="字典编号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="字典名称" prop="name">
                        <el-input v-model="form.name" placeholder="字典名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上级字典" prop="name">
                        <el-input v-model="form.name" placeholder="上级字典" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="字典键值" prop="name">
                        <el-input v-model="form.name" placeholder="字典键值" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="字典排序" prop="name">
                        <el-input v-model="form.name" placeholder="字典排序" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="封存" prop="name">
                        <el-switch v-model="value1" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="字典备注" prop="name">
                        <el-input v-model="form.name" placeholder="字典备注" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible=false" >取 æ¶ˆ</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 å­˜</el-button>
        </template>
    </el-dialog>
</template>

<script>
    export default {
        emits: ['success', 'closed'],
        data() {
            return {
                value1: true,
                mode: "add",
                titleMap: {
                    add: '新增',
                    edit: '修改',
                    show: '查看'
                },
                visible: false,
                isSaveing: false,
                //表单数据
                form: {
                    id:"",
                    userName: "",
                    avatar: "",
                    name: "",
                    dept: "",
                    group: []
                },
                //验证规则
                rules: {
                    avatar:[
                        {required: true, message: '请上传头像'}
                    ],
                    userName: [
                        {required: true, message: '请输入登录账号'}
                    ],
                    name: [
                        {required: true, message: '请输入真实姓名'}
                    ],
                    password: [
                        {required: true, message: '请输入登录密码'},
                        {validator: (rule, value, callback) => {
                            if (this.form.password2 !== '') {
                                this.$refs.dialogForm.validateField('password2');
                            }
                            callback();
                        }}
                    ],
                    password2: [
                        {required: true, message: '请再次输入密码'},
                        {validator: (rule, value, callback) => {
                            if (value !== this.form.password) {
                                callback(new Error('两次输入密码不一致!'));
                            }else{
                                callback();
                            }
                        }}
                    ],
                    dept: [
                        {required: true, message: '请选择所属部门'}
                    ],
                    group: [
                        {required: true, message: '请选择所属角色', trigger: 'change'}
                    ]
                },
                //所需数据选项
                groups: [],
                groupsProps: {
                    value: "id",
                    multiple: true,
                    checkStrictly: true
                },
                depts: [],
                deptsProps: {
                    value: "id",
                    checkStrictly: true
                }
            }
        },
        mounted() {
            // this.getGroup()
            // this.getDept()
        },
        methods: {
            //显示
            open(mode='add'){
                this.mode = mode;
                this.visible = true;
                return this
            },
            //加载树数据
            async getGroup(){
                var res = await this.$API.system.role.list.get();
                this.groups = res.data.rows;
            },
            async getDept(){
                var res = await this.$API.system.dept.list.get();
                this.depts = res.data;
            },
            //表单提交方法
            submit(){
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
                        var res = await this.$API.demo.post.post(this.form);
                        this.isSaveing = false;
                        if(res.code == 200){
                            this.$emit('success', this.form, this.mode)
                            this.visible = false;
                            this.$message.success("操作成功")
                        }else{
                            this.$alert(res.message, "提示", {type: 'error'})
                        }
                    }else{
                        return false;
                    }
                })
            },
            //表单注入数据
            setData(data){
                this.form.id = data.id
                this.form.userName = data.userName
                this.form.avatar = data.avatar
                this.form.name = data.name
                this.form.group = data.group
                this.form.dept = data.dept

                //可以和上面一样单个注入，也可以像下面一样直接合并进去
                //Object.assign(this.form, data)
            }
        }
    }
</script>

<style>
</style>

 src/views/console/system/addDict.vue

@@ -2,19 +2,29 @@
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="120px" label-position="center">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="岗位编号" prop="userName">
                        <el-input v-model="form.userName" placeholder="岗位编号" clearable></el-input>
                <el-col :span="24">
                    <el-form-item label="字典编号" prop="userName">
                        <el-input v-model="form.userName" placeholder="字典编号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="岗位" prop="name">
                        <el-input v-model="form.name" placeholder="岗位" clearable></el-input>
                    <el-form-item label="字典名称" prop="name">
                        <el-input v-model="form.name" placeholder="字典名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="使用状态" prop="name">
                    <el-form-item label="字典排序" prop="name">
                        <el-input v-model="form.name" placeholder="字典排序" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="封存" prop="name">
                        <el-switch v-model="value1" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="字典备注" prop="name">
                        <el-input v-model="form.name" placeholder="字典备注" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
@@ -34,8 +44,8 @@
                value1: true,
                mode: "add",
                titleMap: {
                    add: '添加岗位',
                    edit: '修改岗位',
                    add: '新增',
                    edit: '修改',
                    show: '查看'
                },
                visible: false,

 src/views/console/system/addMenu.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,217 @@
<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="900" destroy-on-close @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="120px" label-position="center">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="菜单名称" prop="userName">
                        <el-input v-model="form.userName" placeholder="字典编号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="路由地址" prop="name">
                        <el-input v-model="form.name" placeholder="字典名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上级菜单" prop="name">
                        <el-input v-model="form.name" placeholder="字典排序" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单图标" prop="name">
                        <el-input v-model="form.name" placeholder="字典排序" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单编号" prop="name">
                        <el-input v-model="form.name" placeholder="字典排序" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单类型" prop="name">
                        <el-radio-group v-model="form.name">
                            <el-radio :value="1">APP</el-radio>
                            <el-radio :value="2">菜单</el-radio>
                            <el-radio :value="3">按钮</el-radio>
                            <el-radio :value="4">卡片</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单别名" prop="name">
                        <el-input v-model="form.name" placeholder="字典排序" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="新窗口" prop="name">
                        <el-radio-group v-model="form.name">
                            <el-radio :value="1">是</el-radio>
                            <el-radio :value="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="启用缓存" prop="name">
                        <el-radio-group v-model="form.name">
                            <el-radio :value="1">是</el-radio>
                            <el-radio :value="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属应用" prop="name">
                        <el-select v-model="form.name" style="width: 100%">
                            <el-option v-for="item in groups" :key="item.id" :label="item.label" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="菜单排序" prop="name">
                        <el-input v-model="form.name" placeholder="菜单排序" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="菜单备注" prop="name">
                        <el-input v-model="form.name" type="textarea" placeholder="菜单备注" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible=false" >取 æ¶ˆ</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 å­˜</el-button>
        </template>
    </el-dialog>
</template>

<script>
    export default {
        emits: ['success', 'closed'],
        data() {
            return {
                value1: true,
                mode: "add",
                titleMap: {
                    add: '新 å¢ž',
                    edit: '编 è¾‘',
                    show: '查 çœ‹'
                },
                visible: false,
                isSaveing: false,
                //表单数据
                form: {
                    id:"",
                    userName: "",
                    avatar: "",
                    name: "",
                    dept: "",
                    group: []
                },
                //验证规则
                rules: {
                    avatar:[
                        {required: true, message: '请上传头像'}
                    ],
                    userName: [
                        {required: true, message: '请输入登录账号'}
                    ],
                    name: [
                        {required: true, message: '请输入真实姓名'}
                    ],
                    password: [
                        {required: true, message: '请输入登录密码'},
                        {validator: (rule, value, callback) => {
                            if (this.form.password2 !== '') {
                                this.$refs.dialogForm.validateField('password2');
                            }
                            callback();
                        }}
                    ],
                    password2: [
                        {required: true, message: '请再次输入密码'},
                        {validator: (rule, value, callback) => {
                            if (value !== this.form.password) {
                                callback(new Error('两次输入密码不一致!'));
                            }else{
                                callback();
                            }
                        }}
                    ],
                    dept: [
                        {required: true, message: '请选择所属部门'}
                    ],
                    group: [
                        {required: true, message: '请选择所属角色', trigger: 'change'}
                    ]
                },
                //所需数据选项
                groups: [],
                groupsProps: {
                    value: "id",
                    multiple: true,
                    checkStrictly: true
                },
                depts: [],
                deptsProps: {
                    value: "id",
                    checkStrictly: true
                }
            }
        },
        mounted() {
            // this.getGroup()
            // this.getDept()
        },
        methods: {
            //显示
            open(mode='add'){
                this.mode = mode;
                this.visible = true;
                return this
            },
            //加载树数据
            async getGroup(){
                var res = await this.$API.system.role.list.get();
                this.groups = res.data.rows;
            },
            async getDept(){
                var res = await this.$API.system.dept.list.get();
                this.depts = res.data;
            },
            //表单提交方法
            submit(){
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
                        var res = await this.$API.demo.post.post(this.form);
                        this.isSaveing = false;
                        if(res.code == 200){
                            this.$emit('success', this.form, this.mode)
                            this.visible = false;
                            this.$message.success("操作成功")
                        }else{
                            this.$alert(res.message, "提示", {type: 'error'})
                        }
                    }else{
                        return false;
                    }
                })
            },
            //表单注入数据
            setData(data){
                this.form.id = data.id
                this.form.userName = data.userName
                this.form.avatar = data.avatar
                this.form.name = data.name
                this.form.group = data.group
                this.form.dept = data.dept

                //可以和上面一样单个注入，也可以像下面一样直接合并进去
                //Object.assign(this.form, data)
            }
        }
    }
</script>

<style>
</style>

 src/views/console/system/addUser.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,188 @@
<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="120px" label-position="center">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="账号" prop="userName">
                        <el-input v-model="form.userName" placeholder="岗位编号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="账号昵称" prop="name">
                        <el-input v-model="form.name" placeholder="岗位" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="密码" prop="name">
                        <el-input v-model="form.name" placeholder="岗位" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号" prop="name">
                        <el-input v-model="form.name" placeholder="岗位" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="邮箱" prop="name">
                        <el-input v-model="form.name" placeholder="岗位" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="关联员工" prop="name">
                        <el-input v-model="form.name" placeholder="岗位" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="数据权限" prop="name">
                        <el-select v-model="form.name" style="width: 100%">
                            <el-option v-for="item in groups" :key="item.id" :label="item.label" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属角色" prop="name">
                        <el-select v-model="form.name" style="width: 100%">
                            <el-option v-for="item in groups" :key="item.id" :label="item.label" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible=false" >取 æ¶ˆ</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 å­˜</el-button>
        </template>
    </el-dialog>
</template>

<script>
    export default {
        emits: ['success', 'closed'],
        data() {
            return {
                value1: true,
                mode: "add",
                titleMap: {
                    add: '新建账号',
                    edit: '编辑账号',
                    show: '查看'
                },
                visible: false,
                isSaveing: false,
                //表单数据
                form: {
                    id:"",
                    userName: "",
                    avatar: "",
                    name: "",
                    dept: "",
                    group: []
                },
                //验证规则
                rules: {
                    avatar:[
                        {required: true, message: '请上传头像'}
                    ],
                    userName: [
                        {required: true, message: '请输入登录账号'}
                    ],
                    name: [
                        {required: true, message: '请输入真实姓名'}
                    ],
                    password: [
                        {required: true, message: '请输入登录密码'},
                        {validator: (rule, value, callback) => {
                            if (this.form.password2 !== '') {
                                this.$refs.dialogForm.validateField('password2');
                            }
                            callback();
                        }}
                    ],
                    password2: [
                        {required: true, message: '请再次输入密码'},
                        {validator: (rule, value, callback) => {
                            if (value !== this.form.password) {
                                callback(new Error('两次输入密码不一致!'));
                            }else{
                                callback();
                            }
                        }}
                    ],
                    dept: [
                        {required: true, message: '请选择所属部门'}
                    ],
                    group: [
                        {required: true, message: '请选择所属角色', trigger: 'change'}
                    ]
                },
                //所需数据选项
                groups: [],
                groupsProps: {
                    value: "id",
                    multiple: true,
                    checkStrictly: true
                },
                depts: [],
                deptsProps: {
                    value: "id",
                    checkStrictly: true
                }
            }
        },
        mounted() {
            // this.getGroup()
            // this.getDept()
        },
        methods: {
            //显示
            open(mode='add'){
                this.mode = mode;
                this.visible = true;
                return this
            },
            //加载树数据
            async getGroup(){
                var res = await this.$API.system.role.list.get();
                this.groups = res.data.rows;
            },
            async getDept(){
                var res = await this.$API.system.dept.list.get();
                this.depts = res.data;
            },
            //表单提交方法
            submit(){
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
                        var res = await this.$API.demo.post.post(this.form);
                        this.isSaveing = false;
                        if(res.code == 200){
                            this.$emit('success', this.form, this.mode)
                            this.visible = false;
                            this.$message.success("操作成功")
                        }else{
                            this.$alert(res.message, "提示", {type: 'error'})
                        }
                    }else{
                        return false;
                    }
                })
            },
            //表单注入数据
            setData(data){
                this.form.id = data.id
                this.form.userName = data.userName
                this.form.avatar = data.avatar
                this.form.name = data.name
                this.form.group = data.group
                this.form.dept = data.dept

                //可以和上面一样单个注入，也可以像下面一样直接合并进去
                //Object.assign(this.form, data)
            }
        }
    }
</script>

<style>
</style>

 src/views/console/system/allocationDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,218 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-03-29 15:35:43
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-dialog title="字典名称字典配置" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
        <div class="dict-main">
            <el-form :inline="true" :model="searchData" abel-width="120px">
                <el-form-item label="字典编号">
                    <el-input v-model="searchData.test" placeholder="字典编号" clearable />
                </el-form-item>
                <el-form-item label="字典名称">
                    <el-select
                        v-model="searchData.test"
                        placeholder="字典名称"
                        clearable
                    >
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchBtn">搜索</el-button>
                    <el-button @click="searchBtn">清空</el-button>
                </el-form-item>
            </el-form>
            <div>
                <div class="dict-Btn">
                    <div class="dict-btn-bottom"> 
                        <el-button type="primary" @click="addPerson">+ æ–°å¢ž</el-button>
                        <el-button type="danger" plain @click="delPerson">删除</el-button>
                    </div>
                </div>
                <div class="dict-table">
                    <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="date" label="字典编号"></el-table-column>
                        <el-table-column prop="name" label="字典名称"></el-table-column>
                        <el-table-column prop="name" label="字典排序"></el-table-column>
                        <el-table-column prop="name" label="封存"></el-table-column>
                        <el-table-column fixed="right" label="操作">
                            <template #default="scope">
                                <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
                                <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                                <el-button text type="primary" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                                <el-button text type="primary" size="small" @click="table_allocation(scope.row, scope.$index)">新增子项</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400">
                    </el-pagination>
                </div>
            </div>
        </div>
        <SubitemAdd-dict v-if="dialog.save" ref="SubitemAddDict" @success="handleSuccess" @closed="dialog.allocation=false"></SubitemAdd-dict>
    </el-dialog>
	
</template>
<script>
    import SubitemAddDict from './SubitemAddDict'
    export default {
        emits: ['success', 'closed'],
        data(){
            return {
                visible: false,
                searchData: {
                    test: ""
                },
                dialog: {
                    save: false
                },
                leftActive: true,
                input: '',
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }],
                input3: '',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 å¼„',
                    zip: 200333
                }]
            }
        },
        created(){
			
        },
        mounted(){
			
        },
        components: {
            SubitemAddDict
        },
        methods: {
            //显示
            open(mode='add'){
                this.mode = mode;
                this.visible = true;
                return this
            },
            searchBtn() {},
            //字典配置
            table_allocation(row) {
                this.addPerson();
            },
            //删除
            table_del(row) {},
            //添加
            addPerson(){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.SubitemAddDict.open()
                })
            },
            table_edit(row){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.SubitemAddDict.open('edit').setData(row)
                })
            },
            //查看
            table_show(row){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.SubitemAddDict.open('show').setData(row)
                })
            },
            handleSelectionChange() {},
            delPerson() {},
            changeDepartment() {
                this.departmentVisible = true;
            },
            changeTab(name) {
                if(name == 1) {
                    this.leftActive = true;
                }else {
                    this.leftActive = false;
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} æ¡`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped>
    .dict-main {
        background-color: #fff;
        margin: 8px;
        padding: 8px;
    }
    .dict-Btn {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #dcdfe6;
        margin-bottom: 8px;
        padding-left: 8px;
        padding-right: 8px;
    }
    .searchStatus {
        margin-right: 6px;
        width: 200px;
    }
    .dict-btn-bottom {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 8px;
    }
    .dict-table {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 8px;
		
    }
    .multipleTableRef {
        margin-bottom: 8px;
    }
</style>

 src/views/console/system/dict.vue

@@ -2,74 +2,52 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-03-28 18:25:55
 * @LastEditTime: 2024-03-29 15:31:38
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="person-person">
        <div class="person-person-right">
            <div class="right-top">
                <div class="right-bottom"> 
    <div class="dict-main">
        <el-form :inline="true" :model="searchData" abel-width="120px">
            <el-form-item label="字典编号">
                <el-input v-model="searchData.test" placeholder="字典编号" clearable />
            </el-form-item>
            <el-form-item label="字典名称">
                <el-select
                    v-model="searchData.test"
                    placeholder="字典名称"
                    clearable
                >
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchBtn">搜索</el-button>
                <el-button @click="searchBtn">清空</el-button>
            </el-form-item>
        </el-form>
        <div>
            <div class="dict-Btn">
                <div class="dict-btn-bottom"> 
                    <el-button type="primary" @click="addPerson">+ æ–°å¢ž</el-button>
                    <el-button type="danger" plain @click="delPerson">删除</el-button>
                </div>
                <div>
                    <el-select v-model="input3" placeholder="状态" class="searchStatus">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            size="small"
                        />
                    </el-select>
                    <el-input
                        v-model="input3"
                        style="width: 200px"
                        size="small"
                        placeholder="请输入关键字进行过滤"
                        class="input-with-select"
                        >
                        <template #append>
                            <el-button :icon="Search" />
                        </template>
                    </el-input>
                </div>
            </div>
            <div class="right-table">
                <el-table
                    ref="multipleTableRef"
                    :data="tableData"
                    border
                    style="width: 100%"
                    class="multipleTableRef"
                    @selection-change="handleSelectionChange"
                >
            <div class="dict-table">
                <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column
                    prop="date"
                    label="字典编号">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="字典名称">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="字典排序">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="封存">
                    </el-table-column>
                    <el-table-column
                    fixed="right"
                    label="操作">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                        <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
                    </template>
                    <el-table-column prop="date" label="字典编号"></el-table-column>
                    <el-table-column prop="name" label="字典名称"></el-table-column>
                    <el-table-column prop="name" label="字典排序"></el-table-column>
                    <el-table-column prop="name" label="封存"></el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template #default="scope">
                            <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
                            <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                            <el-button text type="primary" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                            <el-button text type="primary" size="small" @click="table_allocation(scope.row, scope.$index)">字典配置</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
@@ -84,46 +62,23 @@
            </div>
        </div>
    </div>

    <el-dialog title="部门调整" v-model="departmentVisible" :width="400" destroy-on-close>
        <el-form :model="departmentFrom" :rules="departmentVisibleRules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="center">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="部门" prop="department">
                        <el-select v-model="departmentFrom.department" style="width: 100%">
                            <el-option v-for="item in groups" :key="item.id" :label="item.label" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="departmentVisible=false" >取 æ¶ˆ</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="departmentSubmit()">保 å­˜</el-button>
        </template>
    </el-dialog>
    
    <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
    <allocation-dialog v-if="dialog.allocation" ref="allocationDialog" @success="handleSuccess" @closed="dialog.allocation=false"></allocation-dialog>
</template>
<script>
    import saveDialog from './addDict'
    import allocationDialog from './allocationDialog'
    export default {
        name: "bakalaka",
        name: "allocation",
        data(){
            return {
                isSaveing: false,
                groups: [],
                departmentFrom: {
                    department: ""
                searchData: {
                    test: ""
                },
                departmentVisibleRules: {
                    department:[
                        {required: true, message: '请选择部门'}
                    ]
                },
                departmentVisible: false,
                dialog: {
                    save: false
                    save: false,
                    allocation: false
                },
                leftActive: true,
                input: '',
@@ -170,12 +125,19 @@
            
        },
        components: {
            saveDialog
            saveDialog,allocationDialog
        },
        methods: {
            departmentSubmit() {
                this.departmentVisible=false;  //部门调整
            searchBtn() {},
            //字典配置
            table_allocation(row) {
                this.dialog.allocation = true;
                this.$nextTick(() => {
                    this.$refs.allocationDialog.open()
                })
            },
            //删除
            table_del(row) {},
            //添加
            addPerson(){
                this.dialog.save = true
@@ -219,70 +181,12 @@
</script>

<style scoped>
    .person-person {
        width: 100%;
        background-color: #f9fafb;
        border: 1px solid #dcdfe6;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
        display: flex;
    }
    .person-person-left {
    .dict-main {
        background-color: #fff;
        width: 300px;
        min-width: 300px;
        margin: 8px;
        overflow: hidden;
        border-radius: 4px;
        padding: 8px;
    }
    .person-person-right {
        background-color: #fff;
        flex: 1;
        margin-top: 8px;
        margin-bottom: 8px;
        overflow: hidden;
        border-radius: 4px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .person-left-title {
        text-align: center;
        vertical-align: middle;
        padding-left: 8px;
    }
    .person-left-title div {
        display: inline-block;
        width: 55px;
        height: 28px;
        line-height: 28px;
        border: 1px solid #dcdfe6;
        cursor: pointer;
    }
    .person-left-title div:nth-child(1) {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-right: 0px;
    }
    .person-left-title div:nth-child(2) {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        border-left: 0px;
    }
    .person-left-active {
        background-color: #3b8e8e;
        color: #fff;
    }
    .person-left-search {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .person-tree {
        background-color: #d8e8e8;
        padding: 4px 18px;
        font-size: 14px;
        font-weight: 400;
    }
    .right-top {
    .dict-Btn {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #dcdfe6;
@@ -290,22 +194,16 @@
        padding-left: 8px;
        padding-right: 8px;
    }
    .right-title {
        font-size: 18px;
        font-weight: bold;
        padding-bottom: 12px;
        margin-bottom: 8px;
    }
    .searchStatus {
        margin-right: 6px;
        width: 200px;
    }
    .right-bottom {
    .dict-btn-bottom {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 8px;
    }
    .right-table {
    .dict-table {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 8px;

 src/views/console/system/menu.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,217 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-03-29 15:50:35
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="dict-main">
        <el-form :inline="true" :model="searchData" abel-width="120px">
            <el-form-item label="菜单名称">
                <el-input v-model="searchData.test" placeholder="菜单名称" clearable />
            </el-form-item>
            <el-form-item label="菜单编号">
                <el-input v-model="searchData.test" placeholder="菜单编号" clearable />
            </el-form-item>
            <el-form-item label="菜单别名">
                <el-input v-model="searchData.test" placeholder="菜单别名" clearable />
            </el-form-item>
            <el-form-item label="所属应用">
                <el-input v-model="searchData.test" placeholder="所属应用" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchBtn">搜索</el-button>
                <el-button @click="searchBtn">清空</el-button>
            </el-form-item>
        </el-form>
        <div>
            <div class="dict-Btn">
                <div class="dict-btn-bottom"> 
                    <el-button type="primary" @click="addPerson">+ æ–°å¢ž</el-button>
                    <el-button type="danger" plain @click="delPerson">删除</el-button>
                </div>
            </div>
            <div class="dict-table">
                <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="date" label="菜单名称"></el-table-column>
                    <el-table-column prop="name" label="路由地址"></el-table-column>
                    <el-table-column prop="name" label="菜单图标"></el-table-column>
                    <el-table-column prop="name" label="菜单编号"></el-table-column>
                    <el-table-column prop="name" label="菜单别名"></el-table-column>
                    <el-table-column prop="name" label="新窗口"></el-table-column>
                    <el-table-column prop="name" label="启用缓存"></el-table-column>
                    <el-table-column prop="name" label="所属应用"></el-table-column>
                    <el-table-column prop="name" label="菜单排序"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                        <template #default="scope">
                            <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
                            <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                            <el-button text type="primary" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                            <el-button text type="primary" size="small" @click="addPerson(scope.row, scope.$index)">新增子项</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
                </el-pagination>
            </div>
        </div>
    </div>
	
    <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
</template>
<script>
    import saveDialog from './addMenu'
    export default {
        name: "allocation",
        data(){
            return {
                searchData: {
                    test: ""
                },
                dialog: {
                    save: false,
                    allocation: false
                },
                leftActive: true,
                input: '',
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }],
                input3: '',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 å¼„',
                    zip: 200333
                }]
            }
        },
        created(){
			
        },
        mounted(){
			
        },
        components: {
            saveDialog
        },
        methods: {
            searchBtn() {},
            //字典配置
            table_allocation(row) {
                this.dialog.allocation = true;
                this.$nextTick(() => {
                    this.$refs.allocationDialog.open()
                })
            },
            //删除
            table_del(row) {},
            //添加
            addPerson(){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open()
                })
            },
            table_edit(row){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('edit').setData(row)
                })
            },
            //查看
            table_show(row){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('show').setData(row)
                })
            },
            handleSelectionChange() {},
            delPerson() {},
            changeDepartment() {
                this.departmentVisible = true;
            },
            changeTab(name) {
                if(name == 1) {
                    this.leftActive = true;
                }else {
                    this.leftActive = false;
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} æ¡`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped>
    .dict-main {
        background-color: #fff;
        margin: 8px;
        padding: 8px;
    }
    .dict-Btn {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #dcdfe6;
        margin-bottom: 8px;
        padding-left: 8px;
        padding-right: 8px;
    }
    .searchStatus {
        margin-right: 6px;
        width: 200px;
    }
    .dict-btn-bottom {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 8px;
    }
    .dict-table {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 8px;
		
    }
    .multipleTableRef {
        margin-bottom: 8px;
    }
</style>

 src/views/console/system/user.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,219 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-03-29 16:20:06
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="user-main">
        <div class="user-top">
            <div class="right-bottom"> 
                <el-button type="primary" @click="addPerson">新建</el-button>
                <el-button type="danger" plain @click="delPerson">删除</el-button>
            </div>
            <div>
                <el-input v-model="input" placeholder="请输入内容" style="width: 180px;margin-right: 8px;"></el-input>
                <el-input v-model="input" placeholder="请输入内容" style="width: 180px;margin-right: 8px;"></el-input>
                <el-button type="primary" @click="searchUser">搜索</el-button>
            </div>
        </div>
        <div class="user-table">
            <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="date" label="账号"></el-table-column>
                <el-table-column prop="name" label="账号昵称"></el-table-column>
                <el-table-column prop="name" label="所属角色"></el-table-column>
                <el-table-column prop="name" label="数据权限"></el-table-column>
                <el-table-column prop="name" label="账号状态"></el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                        <el-button text type="primary" size="small" @click="table_unlock(scope.row, scope.$index)">解锁</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
            </el-pagination>
        </div>
    </div>

    <el-dialog title="部门调整" v-model="departmentVisible" :width="400" destroy-on-close>
        <el-form :model="departmentFrom" :rules="departmentVisibleRules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="center">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="部门" prop="department">
                        <el-select v-model="departmentFrom.department" style="width: 100%">
                            <el-option v-for="item in groups" :key="item.id" :label="item.label" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="departmentVisible=false" >取 æ¶ˆ</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="departmentSubmit()">保 å­˜</el-button>
        </template>
    </el-dialog>

    <el-dialog v-model="dialogVisible" width="500" :before-close="handleClose">
        <span>确定将选择账号解锁?</span>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </div>
        </template>
    </el-dialog>
    <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
</template>
<script>
    import saveDialog from './addUser'
    export default {
        name: "bakalaka",
        data(){
            return {
                dialogVisible: false,
                isSaveing: false,
                groups: [],
                departmentFrom: {
                    department: ""
                },
                departmentVisibleRules: {
                    department:[
                        {required: true, message: '请选择部门'}
                    ]
                },
                departmentVisible: false,
                dialog: {
                    save: false
                },
                leftActive: true,
                input: '',
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }],
                input3: '',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 å¼„',
                    zip: 200333
                }]
            }
        },
        created(){
			
        },
        mounted(){
			
        },
        components: {
            saveDialog
        },
        methods: {
            table_unlock() {
                this.dialogVisible = true;
            },
            searchUser() {},
            departmentSubmit() {
                this.departmentVisible=false;  //部门调整
            },
            //添加
            addPerson(){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open()
                })
            },
            table_edit(row){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('edit').setData(row)
                })
            },
            //查看
            table_show(row){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('show').setData(row)
                })
            },
            handleSelectionChange() {},
            delPerson() {},
            changeDepartment() {
                this.departmentVisible = true;
            },
            changeTab(name) {
                if(name == 1) {
                    this.leftActive = true;
                }else {
                    this.leftActive = false;
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} æ¡`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped>
    .user-main {
        background-color: #f9fafb;
        border: 1px solid #dcdfe6;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
        margin: 8px;
        padding: 8px;
        background-color: #fff;
    }
    .user-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
    }
    .user-table {
        width: 100%;
        margin-bottom: 8px;
		
    }
    .multipleTableRef {
        margin-bottom: 8px;
    }
</style>

 src/views/master/person/main/personPost.vue

@@ -2,7 +2,7 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-03-28 18:25:55
 * @LastEditTime: 2024-03-29 16:08:46
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -38,30 +38,15 @@
                </div>
            </div>
            <div class="right-table">
                <el-table
                    ref="multipleTableRef"
                    :data="tableData"
                    border
                    style="width: 100%"
                    class="multipleTableRef"
                    @selection-change="handleSelectionChange"
                >
                <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column
                    prop="date"
                    label="岗位编号">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="岗位">
                    </el-table-column>
                    <el-table-column
                    fixed="right"
                    label="操作">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                        <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
                    </template>
                    <el-table-column prop="date" label="岗位编号"></el-table-column>
                    <el-table-column prop="name" label="岗位"></el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template #default="scope">
                            <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                            <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination

 src/views/monitor/log/api.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,212 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-03-29 17:38:39
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="api-main">
        <el-form :inline="true" :model="searchData" abel-width="120px">
            <el-form-item label="服务id">
                <el-input v-model="searchData.test" placeholder="服务id" clearable />
            </el-form-item>
            <el-form-item label="服务host">
                <el-input v-model="searchData.test" placeholder="服务host" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchBtn">搜索</el-button>
                <el-button @click="searchBtn">清空</el-button>
            </el-form-item>
        </el-form>
        <div>
            <div class="api-table">
                <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef">
                    <el-table-column prop="date" label="服务id"></el-table-column>
                    <el-table-column prop="name" label="服务host"></el-table-column>
                    <el-table-column prop="name" label="软件环境"></el-table-column>
                    <el-table-column prop="name" label="日志级别"></el-table-column>
                    <el-table-column prop="name" label="日志id"></el-table-column>
                    <el-table-column prop="name" label="请求接口"></el-table-column>
                    <el-table-column prop="name" label="日志时间"></el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template #default="scope">
                            <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
                </el-pagination>
            </div>
        </div>
        <el-drawer v-model="drawer" title="查 çœ‹" direction="rtl" :before-close="handleClose" size="60%" modal-class="viewData">
            <el-form :inline="true" :model="viewData" abel-width="120px" class="form-view-data">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="服务id" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="服务host" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="服务ip" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="软件环境" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="日志级别" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="日志id" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="请求接口" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="日志时间" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="用户代理" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="日志管理" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="请求数据" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-drawer>
    </div>
</template>
<script>
    export default {
        name: "allocation",
        data(){
            return {
                viewData: {},
                drawer: false,
                searchData: {
                    test: ""
                },
                dialog: {
                    save: false,
                    allocation: false
                },
                leftActive: true,
                input: '',
                input3: '',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 å¼„',
                    zip: 200333
                }]
            }
        },
        created(){
			
        },
        mounted(){
			
        },
        methods: {
            handleClose() {
                this.drawer = false;
            },
            searchBtn() {},
            //查看
            table_show(row){
                this.drawer = true;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} æ¡`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped>
    .api-main {
        background-color: #fff;
        margin: 8px;
        padding: 8px;
    }
    .api-table {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 8px;
		
    }
    .multipleTableRef {
        margin-bottom: 8px;
    }
    .form-view-data {
        padding-left: 160px;
        padding-right: 50px;
    }
</style>
<style>
    .viewData .el-drawer .el-drawer__header {
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
</style>

 src/views/monitor/log/error.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,212 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-03-29 17:38:39
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="api-main">
        <el-form :inline="true" :model="searchData" abel-width="120px">
            <el-form-item label="服务id">
                <el-input v-model="searchData.test" placeholder="服务id" clearable />
            </el-form-item>
            <el-form-item label="服务host">
                <el-input v-model="searchData.test" placeholder="服务host" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchBtn">搜索</el-button>
                <el-button @click="searchBtn">清空</el-button>
            </el-form-item>
        </el-form>
        <div>
            <div class="api-table">
                <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef">
                    <el-table-column prop="date" label="服务id"></el-table-column>
                    <el-table-column prop="name" label="服务host"></el-table-column>
                    <el-table-column prop="name" label="软件环境"></el-table-column>
                    <el-table-column prop="name" label="日志级别"></el-table-column>
                    <el-table-column prop="name" label="日志id"></el-table-column>
                    <el-table-column prop="name" label="请求接口"></el-table-column>
                    <el-table-column prop="name" label="日志时间"></el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template #default="scope">
                            <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
                </el-pagination>
            </div>
        </div>
        <el-drawer v-model="drawer" title="查 çœ‹" direction="rtl" :before-close="handleClose" size="60%" modal-class="viewData">
            <el-form :inline="true" :model="viewData" abel-width="120px" class="form-view-data">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="服务id" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="服务host" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="服务ip" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="软件环境" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="日志级别" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="日志id" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="请求接口" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="日志时间" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="用户代理" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="日志管理" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="请求数据" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-drawer>
    </div>
</template>
<script>
    export default {
        name: "allocation",
        data(){
            return {
                viewData: {},
                drawer: false,
                searchData: {
                    test: ""
                },
                dialog: {
                    save: false,
                    allocation: false
                },
                leftActive: true,
                input: '',
                input3: '',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 å¼„',
                    zip: 200333
                }]
            }
        },
        created(){
			
        },
        mounted(){
			
        },
        methods: {
            handleClose() {
                this.drawer = false;
            },
            searchBtn() {},
            //查看
            table_show(row){
                this.drawer = true;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} æ¡`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped>
    .api-main {
        background-color: #fff;
        margin: 8px;
        padding: 8px;
    }
    .api-table {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 8px;
		
    }
    .multipleTableRef {
        margin-bottom: 8px;
    }
    .form-view-data {
        padding-left: 160px;
        padding-right: 50px;
    }
</style>
<style>
    .viewData .el-drawer .el-drawer__header {
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
</style>

 src/views/monitor/log/usual.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,212 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-03-29 17:38:39
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="api-main">
        <el-form :inline="true" :model="searchData" abel-width="120px">
            <el-form-item label="服务id">
                <el-input v-model="searchData.test" placeholder="服务id" clearable />
            </el-form-item>
            <el-form-item label="服务host">
                <el-input v-model="searchData.test" placeholder="服务host" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchBtn">搜索</el-button>
                <el-button @click="searchBtn">清空</el-button>
            </el-form-item>
        </el-form>
        <div>
            <div class="api-table">
                <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef">
                    <el-table-column prop="date" label="服务id"></el-table-column>
                    <el-table-column prop="name" label="服务host"></el-table-column>
                    <el-table-column prop="name" label="软件环境"></el-table-column>
                    <el-table-column prop="name" label="日志级别"></el-table-column>
                    <el-table-column prop="name" label="日志id"></el-table-column>
                    <el-table-column prop="name" label="请求接口"></el-table-column>
                    <el-table-column prop="name" label="日志时间"></el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template #default="scope">
                            <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
                </el-pagination>
            </div>
        </div>
        <el-drawer v-model="drawer" title="查 çœ‹" direction="rtl" :before-close="handleClose" size="60%" modal-class="viewData">
            <el-form :inline="true" :model="viewData" abel-width="120px" class="form-view-data">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="服务id" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="服务host" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="服务ip" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="软件环境" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="日志级别" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="日志id" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="请求接口" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="日志时间" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="用户代理" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="日志管理" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="请求数据" center>
                            <span>aaa</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-drawer>
    </div>
</template>
<script>
    export default {
        name: "allocation",
        data(){
            return {
                viewData: {},
                drawer: false,
                searchData: {
                    test: ""
                },
                dialog: {
                    save: false,
                    allocation: false
                },
                leftActive: true,
                input: '',
                input3: '',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 å¼„',
                    zip: 200333
                    }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 å¼„',
                    zip: 200333
                }]
            }
        },
        created(){
			
        },
        mounted(){
			
        },
        methods: {
            handleClose() {
                this.drawer = false;
            },
            searchBtn() {},
            //查看
            table_show(row){
                this.drawer = true;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} æ¡`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped>
    .api-main {
        background-color: #fff;
        margin: 8px;
        padding: 8px;
    }
    .api-table {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 8px;
		
    }
    .multipleTableRef {
        margin-bottom: 8px;
    }
    .form-view-data {
        padding-left: 160px;
        padding-right: 50px;
    }
</style>
<style>
    .viewData .el-drawer .el-drawer__header {
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
</style>