1

lzhe

2024-04-14 ce13be0bec67641a173e4eb0405b3a2bebda3747

1

 public/img/20240414142903.png

 src/views/home/widgets/components/ver.vue

@@ -6,28 +6,64 @@
                <li><div class="addMenu" @click="showDrawer">+ 添加菜单</div></li>
            </ul>
        </el-card>
        <el-drawer
          title="我是标题"
          :visible="drawer"
          :direction="direction"
          :before-close="handleClose">
          <span>我来啦!</span>
        <el-drawer title="选择菜单" v-model="drawer" :direction="direction" :before-close="handleClose" size="680">
            <div v-for="(value,key,index) in menuList">
                <div class="parent-children-title">{{key}}</div>
                <div class="parent-children">
                    <span v-for="item in value">
                        {{item}}
                        <div class="triangle-topright"></div>
                        <el-icon class="icon-topright"><Select /></el-icon>
                    </span>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    let icons = []
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        icons.push(key)
    }
    export default {
        data() {
            return {
                direction: "rtl",
                drawer: false
                drawer: false,
                menuList: {}
            }
        },
        components: {...ElementPlusIconsVue},
        mounted() {
			
            var data = this.$TOOL.data.get("MENU");
            var obj = {};
            data.forEach((item,index)=> {
                if(item.name != "工作台") {
                    obj[item.name] = this.getLastLevelNames(item.children);
                }
            })
            this.menuList = obj;
        },
        methods: {
            getLastLevelNames(tree) {  
              const lastLevelNames = [];  
			  
              tree.forEach(item => {  
                if (item.children) {  
                  // 递归调用，处理子菜单项  
                  const childLastLevelNames = this.getLastLevelNames(item.children);  
                  // 将子菜单项的最底层名称添加到结果中  
                  lastLevelNames.push(...childLastLevelNames);  
                } else {  
                  // 当前项没有子菜单项，是最后一层，添加其名称  
                  lastLevelNames.push(item.name);  
                }  
              });  
			  
              return lastLevelNames;  
            },
            showDrawer() {
                this.drawer = true;
            },
@@ -45,4 +81,10 @@
    ul li div {border: 1px solid #3b8e8e;margin-top: 10px;height: 43px;margin-left: 10px;display: flex;align-items: center;justify-content: center;color: #3b8e8e;padding: 7px 15px;border-radius: 2px;border-radius: 2px;white-space: nowrap;cursor: pointer;}
    ul li div:hover {background-color: #ebf4f4;}
    .addMenu {border: 1px dashed #3b8e8e;}
    .parent-children-title {margin-left: 10px;margin-top: 24px;font-weight: 700;font-size: 14px;text-align: left;color: #333;}
    .parent-children {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;padding-left: 10px;box-sizing: border-box;}
    .parent-children span {margin-left: 10px;margin-top: 10px;width: 22%;border: 0.5px solid #20B2AA;border-radius: 2px;height: 43px;display: flex;align-items: center;justify-content: center;cursor: pointer;position: relative;}
    .parent-children span:hover {border: 1px solid #104E8B;}
    .triangle-topright {width: 0;height: 0;border-top: 28px solid #3b8e8e;border-left: 28px solid transparent;position: absolute;right: 0;top: 0;}
    .icon-topright {position: absolute;right: 2px;top: 2px;z-index: 2;color: #fff;}
</style>

 src/views/login/components/passwordForm.vue

@@ -125,13 +125,26 @@
                        name: "工作台",
                        path: "/dashboard"
                    }] 
                    // this.$HTTP.get("/api/blade-system/workbench/list?status=1").then(resp=> {
                    //     if(resp.data.length) {
                    //         console.log(resp.data,resp.data[0].name,333);
                            // resp.data.forEach(item=> {
                            //     item.component = "home";
                            //     item.meta = {title: item.nam, icon: 'el-icon-menu', affix: true};
                            //     item.path = "/dashboard";
                            //     item.parentId = item.id;
                            // })
                            // transformedArray[0].path = "/home";
                            // transformedArray[0].children = resp.data;
                    //     }
                    // })
                    //结束
                    var obj = {
                        dashboardGrid: ["welcome", "ver", "time", "progress", "echarts", "about"],
                        menu: transformedArray,
                        permissions: ["list.add", "list.edit", "list.delete", "user.add", "user.edit", "user.delete"]
                    }
                    console.log(obj.menu)
                    console.log(transformedArray,123)
                    // this.$API.system.menu.myMenus.get().then(resp=> {
                    //     Object.assign({},transformedArray,resp.data.menu);
                    //     this.$TOOL.data.set("MENU", obj.menu)

 src/views/login/index.vue

@@ -6,9 +6,10 @@
            </div>
        </div>
        <div class="login_main">
            <div class="login-form">
                <div class="title-name">制造信息管理系统</div>
                <password-form></password-form>
            <div class="login-form" style="margin-top: 26px;">
                <!-- <div class="title-name">制造信息管理系统</div> -->
                <div class="title-name" style="background-image: url(img/20240414142903.png);"></div>
                <password-form style="margin-top:25px;"></password-form>
            </div>
        </div>
    </div>
@@ -91,7 +92,6 @@
    .login_adv__bottom {position: absolute;left:0px;right: 0px;bottom: 0px;color: #fff;padding: 40px;background-image:linear-gradient(transparent, #000);z-index: 3;}
    .login_adv__mask {position: absolute;top:0px;left:0px;right: 0px;bottom: 0px;background: rgba(0,0,0,0.5);z-index: 1;}
    .login_main {position: absolute;top: 0;right:118px;width: 370px;height: 440px;top: 52%;-webkit-transform: translateY(-50%);transform: translateY(-50%);background: #fff;text-align: center;padding: 22px 25px 28px;}
    .login-form {}
    .login-header {margin-bottom: 40px;}
    .login-header .logo {display: flex;align-items: center;}
    .login-header .logo img {width: 40px;height: 40px;vertical-align: bottom;margin-right: 10px;}
@@ -99,7 +99,6 @@
    .login-oauth {display: flex;justify-content:space-around;}
    .login-form .el-divider {margin-top:40px;}
 
    .login-form {}
    .login-form:deep(.el-tabs) .el-tabs__header {margin-bottom: 25px;}
    .login-form:deep(.el-tabs) .el-tabs__header .el-tabs__item {font-size: 14px;}
 
@@ -119,7 +118,7 @@
    .qrCodeLogin img.qrCode {background: #fff;padding:20px;border-radius:10px;}
    .qrCodeLogin p.msg {margin-top: 15px;}
    .qrCodeLogin .qrCodeLogin-result {position: absolute;top:0;left:0;right: 0;bottom: 0;text-align: center;background: var(--el-mask-color);}
    .title-name {font-weight: 900;font-size: 24px;color: #409eff;margin-top: 56px;line-height: 24px;margin-bottom:46px;}
    .title-name {font-weight: 900;font-size: 24px;color: #409eff;width: 100%;height: 39px;background-size: 100%;background-repeat: no-repeat;}
    @media (max-width: 1000px){
        .login_main {display: block;}
        .login_main .login_config {position: static;padding:20px 20px 0 20px;text-align: right;}