Commit a4c6cecf authored by tyn's avatar tyn

前台end

parent eeafcbfb
import network from "@/utils/network";
export const getAuthenticationDetailApi = () => network({
url: "/attestation/information",
method: "post"
});
// 获取供应商类型
export const getSupplierTypeApi = () => network({
url : "/category/list/tree",
method : "post"
})
\ No newline at end of file
......@@ -42,7 +42,7 @@ export const checkUser = (data) => network({
});
export const loginApi = (data) => network({
url: "",
url: "/login",
method: "post",
data
});
......@@ -54,5 +54,5 @@ export const loginOutApi = () => network({
export const getUserInfoApi = () => network({
url: "/getInfo",
method: "post"
method: "get"
});
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<template>
<div class="side-bar">
<!-- 顶部系统名 -->
<div class="top-title">
<img src="@/assets/images/logo.png" alt="">
</div>
<!-- 菜单 -->
<div class="menu">
<el-menu mode="vertical" default-active="/home/index" :collapse="collapseStatus" :unique-opened="true" @select="selectMenu">
<template v-for="(item, subIndex) of menus">
<el-menu-item v-if="item.show" :index="item.path" :key="item.path">
{{item.title}}
</el-menu-item>
</template>
<el-submenu v-for="(subItem, index) of subMenu" :index="subItem.path" :key="subItem.path">
<template slot="title">{{subItem.meta.title}}</template>
<template v-if="subItem.children">
<el-menu-item v-for="(item, subIndex) of subItem.children" :index="item.path" :key="item.path">
{{item.meta.title}}
</el-menu-item>
</template>
</el-submenu>
</el-menu>
</div>
</div>
</template>
<script>
import { routes } from "@/router/";
export default {
name: "sideBar",
data() {
return {
menus: [],
subMenu: [],
collapseStatus: false
};
},
//可访问data属性
created() {
this.createMenu();
},
//计算集
computed: {
},
//方法集
methods: {
createMenu() {
routes.forEach(item => {
if (item.path === "/home") {
if (item.children && item.children.length > 0) {
let temp = item.children;
temp.forEach(child => {
if (child.children && child.children.length > 0) {
this.subMenu.push(child);
} else {
this.menus.push({
path: child.path,
name: child.name,
title: child.meta?.title,
show: child.meta?.show
});
}
});
}
}
});
},
selectMenu(path, pathName) {
if (this.$route.path === path) return;
this.$router.push({ path });
}
},
}
</script>
<style lang="scss" scoped>
.side-bar {
width: 100%;
height: 100%;
border-right: 1px solid #eeeeee;
// 顶部系统名
.top-title {
width: 100%;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
border-bottom: 1px solid #eeeeee;
}
// 菜单
.menu {
width: 100%;
height: calc(100% - 60px);
}
}
</style>
<template>
<div class="home-container">
<!-- 左侧菜单 -->
<div class="side-bar">
<side-bar></side-bar>
</div>
<!-- 主体 -->
<div class="main-container">
<div class="nav-bar">
</div>
<div class="content-container">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import SideBar from "@/components/SideBar";
export default {
name: "home",
components: {
SideBar
},
data() {
return {
};
},
//可访问data属性
created() {
},
//计算集
computed: {
},
//方法集
methods: {
},
}
</script>
<style lang="scss" scoped>
.home-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
.side-bar {
width: 260px;
height: 100%;
}
.main-container {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
.nav-bar {
width: 100%;
height: 70px;
border-bottom: 1px solid #EEEEEE;
box-sizing: border-box;
}
.content-container {
width: 100%;
height: calc(100% - 70px);
padding: 16px;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
}
}
}
</style>
This diff is collapsed.
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "@/router/permission";
Vue.use(ElementUI);
Vue.config.productionTip = false
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
}).$mount('#app');
......@@ -3,29 +3,61 @@ import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
//replace报错
const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {
return originalReplace.call(this, location).catch(err => err);
};
//push报错
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err);
};
const routes = [
{
path: '/',
redirect: '/login',
},
{
path: '/login',
name: 'login',
component: () => import('@/login'),
meta: {
title: "登录页",
needToken: false
}
},
{
path: '/home',
redirect : "/home/index",
name: 'Home',
component: () => import(/* webpackChunkName: "Home" */"@/home"),
meta: {
title: "首页",
needToken: true
},
children: [
{
path: '/home/index',
name: 'HomeIndex',
component: () => import(/* webpackChunkName: "Home" */"@/views/certificationManagement"),
meta: {
title: "认证管理",
needToken: true,
show: true
},
}
]
},
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
redirect: '/login',
},
{
path: '/login',
// redirect: '/login',
name: 'login',
component: () => import('@/login'),
meta: {
title: "登录页",
needToken: false
}
},
]
routes
});
export default router;
export { routes };
......@@ -20,7 +20,7 @@ router.beforeEach((to, from, next) => {
// 跳转拉取用户基本信息
if (!store.state.user.userInfo?.userId) {
store.dispatch("user/getUserInfo").then(() => {
next();
next({path : "/home"});
})
.catch(err => {
Message.error(err.msg || "获取用户信息失败!");
......
......@@ -21,7 +21,7 @@ const actions = {
* @param {Object} payload 参数
* @param {Function} commit 提交同步处理数据
*/
userLogin(payload, { commit }) {
userLogin({ commit },payload) {
return new Promise((resolve, reject) => {
// 登录api调用
......@@ -43,7 +43,7 @@ const actions = {
* @param {Object} payload 参数
* @param {Function} commit 提交同步处理数据
*/
getUserInfo(payload, { commit }) {
getUserInfo({ commit },payload) {
return new Promise((resolve, reject) => {
// 用户信息api调用
......
......@@ -9,7 +9,7 @@ const getToken = () => {
const setToken = (token) => {
try {
if (token) {
localStorage.setItem("userToken", toekn);
localStorage.setItem("userToken", token);
}
} catch (error) {
console.log(error);
......
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>
<template>
<div class="certification-management">
<el-form :model="form" ref="form" :rules="rules" disabled class="certification-form" label-width="160px" :show-message="false">
<div class="registry-info">
<div class="title">
注册信息
</div>
<div class="content">
<div class="inner">
<el-form-item label="账号:" prop="phone">
<el-input v-model="form.phone"></el-input>
</el-form-item>
<el-form-item label="手机号码:" prop="phone">
<el-input v-model="form.phone"></el-input>
</el-form-item>
<el-form-item label="姓名:" prop="userName">
<el-input v-model="form.userName"></el-input>
</el-form-item>
<el-form-item label="性别:" prop="sex">
<el-radio v-model="form.sex" label="0"></el-radio>
<el-radio v-model="form.sex" label="1"></el-radio>
</el-form-item>
<el-form-item label="邮箱:" prop="email" style="margin:0px">
<el-input v-model="form.email"></el-input>
</el-form-item>
</div>
</div>
</div>
<div class="authentication-info">
<div class="title">
认证信息
</div>
<div class="content">
<div class="inner">
<el-form-item label="公司名称:" prop="companyName">
<el-input v-model="form.companyName"></el-input>
</el-form-item>
<el-form-item label="统一社会信用代码:" prop="creditCode">
<el-input v-model="form.creditCode"></el-input>
</el-form-item>
<el-form-item label="法定代表人:" prop="legalPerson">
<el-input v-model="form.legalPerson"></el-input>
</el-form-item>
<el-form-item label="注册资本:" prop="registeredCapital" class="registered-capital">
<el-input v-model="form.registeredCapital"></el-input>
<span>万元</span>
</el-form-item>
<el-form-item label="成立日期:" prop="registeredDate">
<el-input v-model="form.registeredDate"></el-input>
</el-form-item>
<el-form-item label="企业注册地:" prop="registeredAddress">
<el-input v-model="form.registeredAddress"></el-input>
</el-form-item>
<el-form-item label="企业注册地:" prop="addressDetail" style="width:100%">
<el-input v-model="form.addressDetail"></el-input>
</el-form-item>
<el-form-item label="营业执照扫描件:" prop="licenseUrl">
<img v-if="form.licenseUrl" :src="form.licenseUrl" alt="">
</el-form-item>
<el-form-item label="法人代表身份证扫描件:" prop="cardUrl">
<img v-if="form.licenseUrl" :src="form.cardUrl" alt="">
</el-form-item>
<el-form-item label="供应商类型选择:" prop="catId">
<el-cascader v-model="form.catId" :options="options" disabled placeholder=""></el-cascader>
</el-form-item>
</div>
</div>
</div>
</el-form>
</div>
</template>
<script>
import { getAuthenticationDetailApi, getSupplierTypeApi } from "@/api/authentication";
import { mapState } from "vuex";
export default {
name: "certificationManagement",
data() {
return {
form: {
account: "",
userName: "",
sex: "",
email: "",
companyName: "",
creditCode: "",
legalPerson: "",
registeredCapital: "",
registeredDate: "",
addressDetail: "",
registeredAddress: "",
licenseUrl: "",
cardUrl: "",
catId: "",
},
rules: {
"account": [{ required: true }],
"userName": [{ required: true }],
"sex": [{ required: true }],
"email": [{ required: true }],
"companyName": [{ required: true }],
"creditCode": [{ required: true }],
"legalPerson": [{ required: true }],
"registeredCapital": [{ required: true }],
"registeredDate": [{ required: true }],
"addressDetail": [{ required: true }],
"registeredAddress": [{ required: true }],
"licenseUrl": [{ required: true }],
"cardUrl": [{ required: true }],
"catId": [{ required: true }],
},
options: [],
props: {
emitPath: false,
value : "catId",
label : "name"
}
};
},
//可访问data属性
created() {
this.getDetail();
},
//计算集
computed: {
...mapState("user", {
userInfo: state => state.userInfo
})
},
//方法集
methods: {
async getDetail() {
try {
let type = await getSupplierTypeApi();
if (type) {
this.options = type?.data;
}
let res = await getAuthenticationDetailApi();
if (res) {
this.form = { ...this.form, ...this.userInfo, ...res.data };
}
} catch (error) {
console.log(error);
}
}
},
}
</script>
<style lang="scss" scoped>
.certification-management {
width: 100%;
height: 100%;
.certification-form {
// 注册信息
.authentication-info,
.registry-info {
.title {
color: #0081ff;
font-size: 14px;
font-weight: bold;
height: 40px;
line-height: 40px;
padding: 0px 16px;
box-sizing: border-box;
border: 1px solid #eeeeee;
}
.content {
border: 1px solid #eeeeee;
border-top: none;
display: flex;
justify-content: center;
padding: 16px;
box-sizing: border-box;
.inner {
width: 80%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
::v-deep .el-form-item {
display: flex;
width: 45%;
.el-form-item__label {
white-space: nowrap;
min-width: 160px;
}
.el-form-item__content {
flex: 1;
margin: 0px !important;
img {
width: 100%;
max-height: 200px;
}
}
}
}
}
}
// 认证信息
.authentication-info {
.title {
border-top: none;
}
.registered-capital {
::v-deep .el-form-item__content {
& > span {
position: absolute;
right: 0;
height: 100%;
background: #aaaaaa;
width: 20%;
text-align: center;
}
.el-input__inner {
padding-right: 20%;
}
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment