Skip to content

T
tsndu-web
Commit 5b86185c by weijiguang
Options

init

parents
Showing with 1339 additions and 0 deletions
.DS_Store 0 → 100644
File added
.gitignore 0 → 100644
node_modules
dist
README.md 0 → 100644
# Auto
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
babel.config.js 0 → 100644
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "iview-admin",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4",
"iview": "^3.5.4",
"js-md5": "^0.7.3",
"moment": "^2.27.0",
"view-design": "^4.3.2",
"vue": "^2.6.11",
"vue-number-scroll": "^2.0.1",
"vue-router": "^3.4.3",
"vuex": "^3.5.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.3.0",
"@vue/cli-plugin-eslint": "~4.3.0",
"@vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"less": "^3.11.1",
"less-loader": "^5.0.0",
"vue-template-compiler": "^2.6.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
public/index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/.DS_Store 0 → 100644
File added
src/App.vue 0 → 100644
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
src/api/invoke_methods.js 0 → 100644
import {
login,
listCompany,
createCompany,
updateCompanyStatus,
updateCompanyExpired,
updateCompany,
} from "./request_methods";
export default {
namespaced: true,
state: {},
actions: {
asyncLogin(_, payload) {
return login(payload)
},
asyncListCompany(_, payload) {
return listCompany(payload)
},
asyncCreateCompany(_, payload) {
return createCompany(payload)
},
asyncUpdateCompanyStatus(_, payload) {
return updateCompanyStatus(payload)
},
asyncUpdateCompanyExpired(_, payload) {
return updateCompanyExpired(payload)
},
asyncUpdateCompany(_, payload) {
return updateCompany(payload)
},
},
mutations: {
}
};
src/api/request_methods.js 0 → 100644
import axios from "@/libs/axios";
import { stringify } from "qs";
const proxy = process.env.NODE_ENV == 'development' ? "/apis" : "https://smp.sskuaixiu.com/api/order/pub-open/";
if(process.env.NODE_ENV == 'development') {
console.log("dev: " + proxy);
} else {
console.log("env: " + proxy);
}
// 登录
export const login = data => axios.post(`${proxy}/account/login`, data);
// 企业列表
export const listCompany = data => axios.post(`${proxy}/company/list`, data);
// 创建企业
export const createCompany = data => axios.post(`${proxy}/company/create`, data);
// 企业状态
export const updateCompanyStatus = data => axios.post(`${proxy}/company/update/status`, data);
// 企业有效期
export const updateCompanyExpired = data => axios.post(`${proxy}/company/update/expired`, data);
// 修改企业信息
export const updateCompany = data => axios.post(`${proxy}/company/update`, data);
\ No newline at end of file
src/components/Timing/index.vue 0 → 100644
<template>
<div class="Timing">
<DatePicker
clearable
:type="dataType"
class="date_style"
@on-change="change"
:options="startOptions"
v-model="start"
placeholder="开始时间"
/>
<span :style="{width:`${intervalWidth}px`}" class="to">-</span>
<DatePicker
clearable
class="date_style"
:type="dataType"
@on-change="change"
:options="endOptions"
v-model="end"
placeholder="结束时间"
/>
</div>
</template>
<script>
import store from "@/store";
import moment from "moment";
const { dispatch } = store;
export default {
data() {
return {
start: null,
end: null
};
},
computed: {
endOptions() {
const { start } = this;
return {
disabledDate(date) {
if (start) {
return date && date.valueOf() < start.valueOf();
}
}
};
},
startOptions() {
const { end } = this;
return {
disabledDate(date) {
if (end) {
return date && date.valueOf() > end.valueOf();
}
}
};
}
},
model: {
prop: "value",
event: "on-change"
},
props: {
value: Array,
dataType: {
type: String,
default() {
return "datetime";
}
},
valueType: Boolean,
intervalWidth: {
type: Number,
default() {
return 110;
}
}
},
watch: {
value(val) {
this.start = val[0] ? new Date(val[0]) : undefined;
this.end = val[1] ? new Date(val[1]) : undefined;
},
end(val) {
const date = moment(val);
const hour = date.hour();
const minute = date.minute();
const second = date.second();
if (hour === 0 && minute === 0 && second === 0) {
date.add(1, "days");
date.subtract(1, "seconds");
const enwDate = new Date(date.valueOf());
this.end = enwDate;
}
}
},
methods: {
change(value) {
// console.log(value)
let start;
let end;
if (this.start) {
start = this.start.valueOf();
}
if (this.end) {
end = this.end.valueOf();
}
if(this.start === ''){
this.$emit("on-change", [null,end ]);
}else if(this.end === ''){
this.$emit("on-change", [start, null]);
}else if( this.start === '' && this.end === ''){
this.$emit("on-change", [null, null]);
}else{
this.$emit("on-change", [start, end]);
}
}
}
};
</script>
<style lang="less" scoped>
.Timing {
width: 100%;
display: flex;
}
.date_style {
width: 50%;
}
.to {
text-align: center;
display: inline-block;
margin: 0 5px;
}
</style>
\ No newline at end of file
src/components/index.js 0 → 100644
// 时间选择器
import Timing from "./Timing";
export { Timing };
src/libs/axios.js 0 → 100644
import axios from "axios";
import iview from "iview";
import router from "../router";
var service = axios.create({
baseURL: process.env.BASE_API,
timeout: 10000
});
//添加请求拦截器
service.interceptors.request.use(
config => {
const token = localStorage.getItem("token");
if (token) {
config.headers.common["Token"] = "Bearer " + token;
}
return config;
},
function(error) {
return Promise.reject(error);
}
);
//添加响应拦截器
service.interceptors.response.use(
function(res) {
const { data, headers } = res;
if (headers.token) {
localStorage.setItem("token", headers.token);
}
// 获取文件的条件下
if (headers["content-disposition"]) {
return { file: data, fileName: headers["content-disposition"] };
}
const { code } = data;
const { msg } = data;
switch (code) {
case 1:
return data;
case 2:
iview.Notice.error({
title: "错误",
desc: msg
});
localStorage.removeItem("token");
router.push("/");
return data;
case 3:
iview.Notice.error({
title: "错误",
desc: msg
});
return data;
case 999:
iview.Notice.error({
title: "错误",
desc: "服务器错误，请重试！ "
});
return data;
default:
return res;
}
},
function(error) {
console.log("err" + error);
iview.Message.error("服务器错误，请重试！");
return Promise.reject(error);
}
);
export default service;
src/main.js 0 → 100644
import Vue from 'vue';
import App from './App.vue';
import ViewUI from 'view-design'
import 'view-design/dist/styles/iview.css'
import router from './router'
Vue.config.productionTip = false;
Vue.use(ViewUI)
new Vue({
router,
render: h => h(App)
}).$mount("#app")
// new Vue({
// el: '#app',
// router,
// components: { App },
// template: '<App/>'
// })
src/router/index.js 0 → 100644
import Vue from 'vue'
import Router from 'vue-router'
import routes from "./routers";
Vue.use(Router)
const router = new Router({
routes,
mode: "history"
});
export default router;
src/router/routers.js 0 → 100644
export default [
{
path: '/',
key: 'index',
icon: 'logo-xbox',
title: '登录',
visable: false,
component: () => import("@/view/index/index.vue")
},
{
path: '/main',
key: 'main',
icon: 'logo-xbox',
title: '首页',
visable: false,
component: () => import("@/view/main/index.vue")
},
{
path: '/home',
key: 'home',
icon: 'logo-xbox',
title: '首页',
visable: false,
component: () => import("@/view/home/index.vue")
},
{
path: '/company',
key: 'company',
icon: 'logo-xbox',
title: '企业管理',
visable: false,
children: [
{
path: '/company/companys',
key: 'companys',
icon: 'logo-xbox',
title: '企业列表',
visable: false,
component: () => import("@/view/company/companys/index.vue")
},
// {
// path: '/company/add',
// key: 'add',
// icon: 'logo-xbox',
// title: '添加企业',
// visable: false,
// component: () => import("@/view/company/add/index.vue")
// },
{
path: '/company/info',
key: 'info',
icon: 'logo-xbox',
title: '企业信息',
visable: false,
component: () => import("@/view/company/info/index.vue")
},
{
path: '/company/accounts',
key: 'accounts',
icon: 'logo-xbox',
title: '帐号列表',
visable: false,
component: () => import("@/view/company/accounts/index.vue")
}
]
},
{
path: '/data',
key: 'data',
icon: 'logo-xbox',
title: '基础数据',
visable: false,
children: [
{
path: '/data/source',
key: 'source',
icon: 'logo-xbox',
title: '车源管理',
visable: false,
component: () => import("@/view/data/source/index.vue")
},
{
path: '/data/brand',
key: 'brand',
icon: 'logo-xbox',
title: '车辆品牌',
visable: false,
component: () => import("@/view/data/brand/index.vue")
},
{
path: '/data/model',
key: 'model',
icon: 'logo-xbox',
title: '车辆型号',
visable: false,
component: () => import("@/view/data/model/index.vue")
}
]
}
]
src/store/index.js 0 → 100644
import Vue from "vue";
import Vuex from "vuex";
import invoke from "@/api/invoke_methods";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
//
},
mutations: {
//
},
actions: {
//
},
modules: {
invoke
}
});
export default store;
src/view/company/accounts/index.vue 0 → 100644
<template>
<div>
accounts
</div>
</template>
src/view/company/companys/add/index.js 0 → 100644
import store from "@/store";
const { dispatch } = store;
import { Timing } from "@/components/index.js";
import moment from "moment";
export default {
components: { Timing },
props: ["dataSource"],
data() {
return {
abbrDisabled: false,
visible: false,
submitLoading: false,
saveCompanyRule: {
name: [
{
required: true,
message: "请输入企业名称",
trigger: "blur"
}
],
abbr: [
{
required: true,
message: "请输入企业简称",
trigger: "blur"
}
],
contectName: [
{
required: true,
message: "请输入联系人",
trigger: "blur"
}
],
contectPhone: [
{
required: true,
message: "请输入联系电话",
trigger: "blur"
}
],
// expiredDate: [
// {
// type: "date",
// required: true,
// message: "请输入有效期",
// trigger: "blur"
// }
// ],
},
companyForm: {
id: 0,
name: "",
abbr: "",
address: "",
contectName: "",
contectPhone: "",
expiredDate: ""
}
};
},
computed: {
},
watch: {
visible(show) {
this.submitLoading = false;
if (show) {
this.$refs.companyForm.resetFields();
if(this.dataSource) { // 编辑
this.companyForm.id = this.dataSource.id;
this.companyForm.name = this.dataSource.name;
this.companyForm.abbr = this.dataSource.abbr;
this.companyForm.address = this.dataSource.address;
this.companyForm.contectName = this.dataSource.contectName;
this.companyForm.contectPhone = this.dataSource.contectPhone;
this.abbrDisabled = true;
} else { // 添加
this.abbrDisabled = false;
}
} else {
}
},
},
methods: {
saveCompany() {
this.$refs.companyForm.validate(valid => {
if (valid) {
this.submitLoading = true;
const requestData = {
id: this.companyForm.id,
name: this.companyForm.name,
abbr: this.companyForm.abbr,
address: this.companyForm.address,
contectName: this.companyForm.contectName,
contectPhone: this.companyForm.contectPhone,
expiredDate: moment(this.companyForm.expiredDate).valueOf()
}
var methodName = this.dataSource ? "invoke/asyncUpdateCompany" : "invoke/asyncCreateCompany";
dispatch(methodName, requestData).then(({ code }) => {
this.submitLoading = false;
if (code === 1) {
this.$Message.success(this.dataSource ? "修改成功" : "添加成功");
this.$emit("search");
this.visible = false;
}
});
}
});
}
},
mounted() {
}
};
src/view/company/companys/add/index.vue 0 → 100644
<template>
<div>
<a v-if="dataSource" href="javascript:;" @click="visible = true">{{dataSource.name}}</a>
<Button v-else icon="ios-add" type="primary" @click="visible = true">创建企业</Button>
<Modal width="400" v-model="visible" title="企业信息">
<div>
<Form ref="companyForm" :model="companyForm" :rules="saveCompanyRule" :label-width="100">
<Row>
<Col span="24" style="margin-top:-5px">
<FormItem label="企业名称:" prop="name">
<Input v-model.trim="companyForm.name" type="text" />
</FormItem>
</Col>
</Row>
<Row>
<Col span="24" style="margin-top:-5px">
<FormItem label="企业简称:" prop="abbr">
<Input v-model.trim="companyForm.abbr" type="text" :disabled='abbrDisabled' />
</FormItem>
</Col>
</Row>
<Row>
<Col span="24" style="margin-top:-5px">
<FormItem label="企业地址:" prop="address">
<Input v-model.trim="companyForm.address" type="text" />
</FormItem>
</Col>
</Row>
<Row>
<Col span="24" style="margin-top:-5px">
<FormItem label="联系人:" prop="contectName">
<Input v-model.trim="companyForm.contectName" type="text" />
</FormItem>
</Col>
</Row>
<Row>
<Col span="24" style="margin-top:-5px">
<FormItem label="联系电话:" prop="contectPhone">
<Input v-model.trim="companyForm.contectPhone" type="text" />
</FormItem>
</Col>
</Row>
<Row v-if="!dataSource">
<Col span="24" style="margin-top:-5px">
<FormItem label="有效期:" prop="expiredDate">
<DatePicker
v-model="companyForm.expiredDate"
type="date"
style="width: 100%"
placeholder="请输入有效期"></DatePicker>
<!-- // format="yyyy-MM-dd HH:mm" -->
</FormItem>
</Col>
</Row>
</Form>
</div>
<div slot="footer">
<Button @click="visible = false">取消</Button>
<Button @click="saveCompany" :loading="submitLoading" type="primary">确定</Button>
</div>
</Modal>
</div>
</template>
<script src="./index.js"/>
src/view/company/companys/expired/index.js 0 → 100644
import store from "@/store";
const { dispatch } = store;
import { Timing } from "@/components/index.js";
import moment from "moment";
export default {
components: { Timing },
props: ["dataSource"],
data() {
return {
visible: false,
submitLoading: false,
companyForm: {
id: 0,
name: "",
expiredDate: ""
}
};
},
computed: {
},
watch: {
visible(show) {
this.submitLoading = false;
if (show) {
this.$refs.companyForm.resetFields();
if(this.dataSource) { // 编辑
this.companyForm.id = this.dataSource.id;
this.companyForm.name = this.dataSource.name;
this.companyForm.expiredDate = this.dataSource.expiredDate;
} else { // 添加
}
} else {
}
},
},
methods: {
updateExpired() {
if(!this.companyForm.expiredDate) {
this.$Message.error("请选择有效期");
return;
}
this.submitLoading = true;
const requestData = {
id: this.companyForm.id,
expiredDate: moment(this.companyForm.expiredDate).valueOf()
}
dispatch("invoke/asyncUpdateCompanyExpired", requestData).then(({ code }) => {
this.submitLoading = false;
if (code === 1) {
this.$Message.success(this.dataSource ? "修改成功" : "添加成功");
this.$emit("search");
this.visible = false;
}
});
},
getExpiredDate(date) {
this.companyForm.expiredDate = date;
}
},
mounted() {
}
};
src/view/company/companys/expired/index.vue 0 → 100644
<template>
<div>
<Button type="primary" @click="visible = true" size="small">延期</Button>
<Modal width="400" v-model="visible" title="修改有效期">
<div>
<Form ref="companyForm" :model="companyForm" :label-width="100">
<Row>
<Col span="24" style="margin-top:-5px">
<FormItem label="企业名称:" prop="name">
<Input v-model.trim="companyForm.name" type="text" :disabled="true"/>
</FormItem>
</Col>
</Row>
<Row>
<Col span="24" style="margin-top:-5px">
<FormItem label="有效期:" prop="expiredDate">
<DatePicker
:value="companyForm.expiredDate"
ref="expiredDate"
type="date"
style="width: 100%"
placeholder="请输入有效期"
@on-change="getExpiredDate"></DatePicker>
</FormItem>
</Col>
</Row>
</Form>
</div>
<div slot="footer">
<Button @click="visible = false">取消</Button>
<Button @click="updateExpired" :loading="submitLoading" type="primary">确定</Button>
</div>
</Modal>
</div>
</template>
<script src="./index.js"/>
src/view/company/companys/helper.js 0 → 100644
import EditCompany from "./add/index.vue";
import EditExpired from "./expired/index.vue";
export const columns = (search, disable, enable, updateExpired, updateCompany) => [
{
title: "企业名称",
key: "name",
align: "center",
minWidth: 60,
render: (h, { row }) => {
return h(EditCompany, {
props: { dataSource: row },
on: { search }
});
}
},
{
title: "企业简称",
key: "abbr",
align: "center",
minWidth: 60,
},
{
title: "地址",
key: "address",
align: "center",
minWidth: 60,
},
{
title: "联系人",
key: "contectName",
align: "center",
minWidth: 60,
},
{
title: "联系电话",
key: "contectPhone",
align: "center",
minWidth: 60,
},
{
title: "有效期",
key: "expiredDate",
align: "center",
minWidth: 60,
},
{
title: "省",
key: "province",
align: "center",
minWidth: 60,
},
{
title: "市",
key: "city",
align: "center",
minWidth: 60,
},
{
title: "区",
key: "district",
align: "center",
minWidth: 60,
},
{
title: "状态",
align: "center",
minWidth: 60,
render(h, { row }) {
try {
const { status } = row;
return h("span", {style: {color: status == 1 ? 'green' : 'red' }}, status == 1 ? '有效' : '失效');
} catch(e) {
console.log(e);
}
}
},
{
title: "操作",
align: "center",
fixed: 'right',
width: 180,
render(h, { row }) {
try {
const { status } = row;
var emptyTag = h("span","　");
var disableTag = h(
"Poptip",
{
props: { title: "确定停用当前帐号吗？", transfer: true, confirm: true, size: "small" },
on: { "on-ok": () => { row.status=0; disable(row); } }
},
[
h("Button", {props: {type: "error", size: "small"}}, "停用")
]
);
var enableTag = h(
"Button",
{
props: { type: "primary", size: "small" },
on: { click: () => { row.status=1; enable(row); }}
},
"启用"
);
var updateExpiredTag = h(EditExpired, {
props: { dataSource: row },
on: { search }
});
return h("span", status == 1 ? [updateExpiredTag, emptyTag, disableTag] : [enableTag]);
} catch(e) {
console.log(e);
}
}
},
];
src/view/company/companys/index.js 0 → 100644
import store from "@/store";
const { dispatch } = store;
import { columns } from "./helper.js";
import EditCompany from "./add/index.vue";
export default {
components: { EditCompany },
data() {
return {
loading: false,
columns: [],
name: "",
changeCurrent: 1,
data: {
total:0,
current: 1,
records:[],
},
page: {
size: 10,
},
}
},
methods: {
disable(company) {
dispatch("invoke/asyncUpdateCompanyStatus", company);
},
enable(company) {
dispatch("invoke/asyncUpdateCompanyStatus", company);
},
updateExpired(company) {
dispatch("invoke/asyncUpdateCompanyExpired", company);
},
updateCompany(company) {
dispatch("invoke/asyncUpdateCompany", company);
},
search(current = 1) {
this.searchForm = {
name: this.name
};
this.loading = true
const initQuery = {
current,
size: this.page.size,
records: this.searchForm
};
dispatch("invoke/asyncListCompany", {
...initQuery
}).then(({ data }) => {
this.loading = false
if (data != null) {
this.data = {...data};
} else {
this.data = {
total:0,
current: 1,
records:[],
};
}
// console.log(this.data)
});
},
changePage(current) {
this.search(current);
this.changeCurrent = current
},
changeSize(value) {
this.page.size = value
this.search();
},
},
mounted() {
this.columns = columns(this.search, this.disable, this.enable, this.updateExpired, this.updateCompany);
this.search();
}
};
src/view/company/companys/index.vue 0 → 100644
<template>
<div>
<Card>
<Form :label-width="100">
<Row>
<Col span="24">
企业名称：
<Input v-model="name" placeholder="Enter something..." style="width: 200px; margin-right:10px" />
<Button @click="() => search()" type="primary"><Icon type="ios-search-outline" /> 查询</Button>
<EditCompany class="searchBtn" @search="search" style="float:right" />
</Col>
</Row>
</Form>
</Card>
<Card style="margin-top:10px">
<Table
border
:loading="loading"
:columns="columns"
:data="data.records"/>
<Page
style="margin-top:10px"
:total="Number(data.total)"
:current="Number(data.current)"
@on-change="changePage"
@on-page-size-change="changeSize"
:placement="'top'"
:page-size-opts="[10, 30, 50, 100]"
show-sizer
show-elevator
show-total></Page>
</Card>
</div>
</template>
<script src="./index.js"></script>
<style>
.newTableClass {
overflow: visible;
}
.ivu-table-cell {
padding-left: 0;
padding-right: 0;
}
.ivu-table td {
height: 30px;
}
</style>
\ No newline at end of file
src/view/company/info/index.vue 0 → 100644
<template>
<div>
info
</div>
</template>
src/view/data/brand/index.vue 0 → 100644
<template>
<div>
brand
</div>
</template>
src/view/data/model/index.vue 0 → 100644
<template>
<div>
model
</div>
</template>
src/view/data/source/index.vue 0 → 100644
<template>
<div>
source
</div>
</template>
src/view/home/index.vue 0 → 100644
<template>
<div>
home
</div>
</template>
src/view/index/index.js 0 → 100644
import store from "@/store";
import md5 from 'js-md5';
const { dispatch } = store;
export default {
components: { },
data() {
return {
loginForm: {
username: "",
password: "",
},
loginRule: {
username: [ {required: true, message:"请输入帐号", trigger: "blur"} ],
password: [ {required: true, message:"请输入密码", trigger: "blur"} ],
},
}
},
methods: {
login(name) {
this.$refs[name].validate((valid) => {
if (!valid) {
return;
}
var requestData = {
"username": this.loginForm.username,
"password": md5(this.loginForm.password)
}
dispatch("invoke/asyncLogin", requestData).then(response => {
if(!response.data) {
console.log("登录失败");
return;
}
localStorage.setItem("tokenInfo", JSON.stringify(response.data));
this.$router.push({ path: "/main" });
});
})
}
},
mounted() {
}
};
\ No newline at end of file
src/view/index/index.vue 0 → 100644
<template>
<div>
<div class="Title"></div>
<div class="LoginCard">
<Card :bordered="true">
<p slot="title">系统登录</p>
<Form ref="loginForm" :model="loginForm" :rules="loginRule">
<Row>
<Col span="24">
<FormItem prop="username">
<Input type="text" v-model="loginForm.username" placeholder="帐号">
<Icon type="ios-person-outline" slot="prepend"></Icon>
</Input>
</FormItem>
</Col>
</Row>
<Row>
<Col span="24">
<FormItem prop="password">
<Input type="password" v-model="loginForm.password" placeholder="密码">
<Icon type="ios-lock-outline" slot="prepend"></Icon>
</Input>
</FormItem>
</Col>
</Row>
<Row>
<Col span="24">
<FormItem>
<Button type="primary" @click="login('loginForm')" style="width:100%;">确认</Button>
</FormItem>
</Col>
</Row>
</Form>
</Card>
</div>
</div>
</template>
<script src="./index.js"></script>
<style>
.Title {
background-color: cadetblue;
font-size: 24px;
text-align: center;
padding: 10px;
color: black;
}
.LoginCard {
width: 350px;
margin: 0 auto;
margin-top: 50px;
}
</style>
src/view/main/index.js 0 → 100644
import store from "@/store";
import routers from "@/router/routers.js";
const { dispatch } = store;
export default {
components: { },
data() {
return {
maps:[],
currentView: null,
routers,
}
},
methods: {
setMenus() {
var tokenInfo = JSON.parse(localStorage.getItem("tokenInfo"));
if(!tokenInfo) {
this.$Message.error('token获取失败');
return;
}
var menusJson = JSON.parse(tokenInfo.menus);
menusJson.forEach(item => {
var menu = this.getMenuFromRouter(item.key);
menu.visable = true;
if(item.children) {
item.children.forEach(childItem => {
var childMenu = this.getMenuFromRouter(childItem.key);
childMenu.visable = true;
})
}
});
// console.log(routers);
},
getMenuFromRouter(key) {
var maps = [];
for(var i in routers) {
var router = routers[i];
if(router.key == key) {
maps.push(router.title);
router.maps = maps;
return router;
}
if(!router.children || router.children.length<=0) {
continue;
}
for(var j in router.children) {
try{
var childRouter = router.children[j];
if(childRouter.key == key) {
maps.push(router.title);
maps.push(childRouter.title);
childRouter.maps = maps;
return childRouter;
}
} catch(e) {
console.log(router);
}
}
}
},
onMenuSelect(name) {
var router = this.getMenuFromRouter(name);
this.currentView = router.component;
this.maps = router.maps;
}
},
mounted() {
this.setMenus();
}
};
\ No newline at end of file
src/view/main/index.vue 0 → 100644
<template>
<div class="layout">
<Layout>
<Header>
<Menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-logo"></div>
<div class="layout-nav">
<MenuItem name="1"><Icon type="ios-navigate"></Icon>Item 1</MenuItem>
<MenuItem name="2"><Icon type="ios-navigate"></Icon>Item 2</MenuItem>
<MenuItem name="3"><Icon type="ios-navigate"></Icon>Item 3</MenuItem>
</div>
</Menu>
</Header>
<Layout style="position:absolute;top: 64px;bottom: 0px;left: 0px;right: 0px;">
<Sider hide-trigger :style="{background: '#fff'}">
<Menu theme="light" width="auto" :open-names="['1']" ref="menu" @on-select="onMenuSelect">
<div v-for='(item, index) in routers' v-bind:key='index'>
<div v-if='item.visable && !item.children'>
<MenuItem :name="item.key" ><Icon :type="item.icon"></Icon> {{item.title}}</MenuItem>
</div>
<div v-else-if="item.visable">
<Submenu :name="item.key">
<template slot="title"><Icon :type="item.icon"></Icon> {{item.title}}</template>
<div v-for='(childItem, index) in item.children' v-bind:key='index'>
<div v-if='childItem.visable'>
<MenuItem :name="childItem.key"><Icon :type="childItem.icon"></Icon> {{childItem.title}}</MenuItem>
</div>
</div>
</Submenu>
</div>
</div>
</Menu>
</Sider>
<Layout :style="{padding: '0 24px 24px'}">
<Breadcrumb :style="{margin: '24px 0'}">
<BreadcrumbItem v-for="(item, index) in maps" v-bind:key="index">{{item}}</BreadcrumbItem>
</Breadcrumb>
<component :is="currentView"></component>
</Layout>
</Layout>
</Layout>
</div>
</template>
<script src="./index.js"></script>
<style scoped>
.layout{
background: #f5f7f9;
overflow: hidden;
widows: 100%;
height: 100%;
}
.layout-logo{
width: 100px;
height: 30px;
background: #5b6270;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
}
.layout-nav{
width: 420px;
margin: 0 auto;
margin-right: 20px;
}
</style>
vue.config.js 0 → 100644
module.exports = {
lintOnSave: false,
devServer: {
proxy: {
'/apis': {
target: 'http://localhost:8088/', // 接口域名
// target: 'https://smp.sskuaixiu.com/', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '/' //需要rewrite重写的,
// '^/bi': '/api/order/pub-open/bi' //需要rewrite重写的,
}
},
}
},
}
\ No newline at end of file
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