zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UP

This commit is contained in:
sakuya 2021-04-24 00:24:12 +08:00
parent fe1688c7a3
commit e56e0a4dbb
6 changed files with 131 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/login-left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

7
src/style/style.less
View File

@ -9,7 +9,7 @@
::-webkit-scrollbar-track {background-color: rgba(50, 50, 50, 0.1);}
::-webkit-scrollbar-track:hover {background-color: rgba(50, 50, 50, 0.2);}
.aminui-side-split {position: absolute;top:0px;left:0px;bottom:0px;width:65px;background: #333;z-index: 90;}
.aminui-side-split {position: absolute;top:0px;left:0px;bottom:0px;width:65px;background: #333;z-index: 5;}
.adminui-side-split-scroll {position: absolute;top:0px;left:0px;bottom:0px;right:0px;overflow: auto;overflow-x:hidden;}
.aminui-side-split li {cursor: pointer;width: 65px;height: 65px;color: #fff;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.aminui-side-split li i {font-size: 16px;}
@ -23,11 +23,11 @@
.adminui-side-split-scroll::-webkit-scrollbar-track:hover {background-color: rgba(255, 255, 255, 0);}
.aminui-side {position: absolute;z-index: 80;top:0px;left:65px;bottom:0px;width:210px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;}
.aminui-side {position: absolute;z-index: 5;top:0px;left:65px;bottom:0px;width:210px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;}
.adminui-side-scroll {position: absolute;top:0px;left:0px;bottom:0px;right:0px;overflow: auto;overflow-x:hidden;}
.aminui-body {position: absolute;z-index: 70;top:0px;left:275px;bottom:0px;right:0px;}
.aminui-body {position: absolute;z-index: 4;top:0px;left:275px;bottom:0px;right:0px;}
.adminui-header {height: 50px;border-bottom: 1px solid #ebeef5;background: #fff;box-shadow: 0 1px 4px rgba(0,21,41,.08);display: flex;justify-content:space-between;}
@ -68,3 +68,4 @@
.el-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:13px 15px;}
.el-main {padding:15px;}
.el-pagination {margin-top: 20px;}
.el-drawer__body {overflow: auto;}

36
src/views/list.vue
View File

@ -8,11 +8,11 @@
<el-container>
<el-header>
<el-button type="primary">主要按钮</el-button>
<el-button disabled>默认按钮</el-button>
<el-button disabled>默认按钮</el-button>
<el-button type="primary" icon="el-icon-plus"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary">默认按钮</el-button>
<el-dropdown style="margin-left: 10px;">
<el-button>更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
<el-button type="primary" plain icon="el-icon-arrow-down"></el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>黄金糕</el-dropdown-item>
@ -23,7 +23,7 @@
</el-header>
<el-main id="tableMain">
<el-card shadow="never" @selection-change='handleSelectionChange'>
<el-card shadow="never">
<el-table :data="tableData" row-key="name" stripe default-expand-all :height="tableHeight">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="显示名称" prop="meta.title" width="200"></el-table-column>
@ -46,8 +46,9 @@
</el-table-column>
<el-table-column label="操作" fixed="right" width="100">
<template>
<el-button type="text" size="small">编辑</el-button>
<template #default="scope">
<el-button @click="table_show(scope.row)" type="text" size="small">查看</el-button>
<el-button @click="table_edit(scope.row)" type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
@ -55,10 +56,15 @@
</el-card>
</el-main>
</el-container>
<el-drawer title="我是标题" v-model="drawer" :size="800" :append-to-body="true" direction="rtl" destroy-on-close>
<Show showid="我来自父组件"></Show>
</el-drawer>
</el-container>
</template>
<script>
import Show from './show.vue';
export default {
name: 'list',
data() {
@ -75,9 +81,13 @@
]}
],
tableHeight: '0',
tableData: []
tableData: [],
drawer: false
}
},
components: {
Show
},
created() {
this.tableData = this.$TOOL.data.get("user").menuList;
},
@ -96,8 +106,14 @@
handleNodeClick(data){
console.log(data);
},
handleSelectionChange(val) {
console.log(val);
table_show(row) {
this.$router.push({
path: '/template/show/' + row.meta.title
});
},
table_edit(row) {
console.log(row);
this.drawer = true
}
}
}

90
src/views/login.vue
View File

@ -1,19 +1,103 @@
<template>
<h2>LOGIN</h2>
<el-button type="primary" @click='login()'>模拟登录</el-button>
<div class="login_container">
<div class="login_body">
<div class="login-sidebox">
<div class="login-logo">
<i class="el-icon-platform-eleme"></i>SCUI
</div>
<div class="login-title">
<h2>面面俱到的中后台前端框架</h2>
<p>基于Vue 3.0 + Vue-Router 4.0 + Element-Plus + VueX + Axios 后台管理系统前端框架。</p>
</div>
</div>
<div class="login-form">
<h2>登录</h2>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" size="large">
<el-form-item prop="user">
<el-input v-model="ruleForm.user" prefix-icon="el-icon-user" clearable placeholder="用户名 / 手机 / 邮箱"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="ruleForm.password" prefix-icon="el-icon-lock" clearable show-password placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item style="margin-bottom: 10px;">
<el-checkbox label="记住我" v-model="ruleForm.autologin"></el-checkbox>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%;" @click="submitForm('ruleForm')" round>登 录</el-button>
</el-form-item>
</el-form>
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
<div class="login-oauth">
<el-button size="medium" type="primary" icon="el-icon-platform-eleme" circle></el-button>
<el-button size="medium" type="success" icon="el-icon-s-goods" circle></el-button>
<el-button size="medium" type="info" icon="el-icon-s-promotion" circle></el-button>
<el-button size="medium" type="warning" icon="el-icon-menu" circle></el-button>
</div>
</div>
</div>
<div class="login-footer">© SCUI</div>
</div>
</template>
<style scoped>
.login_container {position: absolute;top:50%;left:50%;width: 900px;margin: 0 auto;z-index: 1;transform: translate(-50%, -50%);}
.login_body {width: inherit;display: flex;box-shadow: 0px 20px 80px 0px rgba(0,0,0,0.3);}
.login-sidebox {width: 50%;background:url(/images/login-left.png) 0 0 no-repeat #607089;padding: 60px;color: #fff;position: relative;}
.login-sidebox
.login-logo {font-size: 35px;}
.login-logo i {margin-right: 10px;}
.login-title {margin-top: 20px;}
.login-title h2 {font-size: 22px;font-weight: normal;}
.login-title p {font-size: 12px;margin-top:40px;line-height: 1.8;color: rgba(255,255,255,0.8);}
.login-form {width: 50%;padding: 60px;background: #fff;}
.login-form h2 {font-size: 24px;color: #40485b;margin-bottom: 25px;}
.login-oauth {display: flex;justify-content:space-around;}
.login-form .el-divider {margin-top:40px;}
.login-footer {text-align: center;color: #999;margin-top: 50px;}
</style>
<script>
export default {
data() {
return {
ruleForm: {
user: "admin",
password: "admin",
autologin: false
},
rules: {
user: [
{required: true, message: '请输入用户名', trigger: 'blur'}
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'}
]
}
}
},
created: function() {
this.$TOOL.data.remove("user")
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.login()
}else{
console.log('error submit!!');
return false;
}
})
},
login: async function() {
var userInfo = await this.$API.user.info();
this.$TOOL.data.set("user", userInfo.data);

20
src/views/show.vue
View File

@ -1,6 +1,7 @@
<template>
<div>
<el-empty description="SHOW"></el-empty>
<h2>ID={{ id }}</h2>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</div>
</template>
@ -8,20 +9,23 @@
<script>
export default {
name: 'show',
props: ['showid'],
data() {
return {
id: this.$route.params.id,
id: this.$route.params.id || this.showid,
input: ""
}
},
mounted: function() {
//修改tags title
this.$store.commit("updateViewTags", {
path: this.$route.path,
meta: {
title:"详情ID="+this.id
}
})
//如果路由与组件名称相同修改tags title，防止作用于非路由组件时修改tags
if(this.$route.name==this.$options.name){
this.$store.commit("updateViewTags", {
path: this.$route.path,
meta: {
title:"详情ID="+this.id
}
})
}
}
}
</script>