hzd/h5
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
hezhidong
2024-01-30 10:55:56 +08:00
parent ff582f261b
commit 4438dbfe4d
6 changed files with 328 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/navBars/breadcrumb/user.vue
+8 -16
View File
@@ -87,17 +87,17 @@
<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onDropdownCommand"> <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onDropdownCommand">
<span class="layout-navbars-breadcrumb-user-link"> <span class="layout-navbars-breadcrumb-user-link">
<img <img
:src="UserInformation.avatar" :src="getUserInfos.photo"
class="layout-navbars-breadcrumb-user-link-photo mr5" class="layout-navbars-breadcrumb-user-link-photo mr5"
/> />
{{ UserInformation.name }} {{ getUserInfos.userName === "" ? "test" : getUserInfos.userName }}
<i class="el-icon-arrow-down el-icon--right"></i> <i class="el-icon-arrow-down el-icon--right"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="/home">{{ <el-dropdown-item command="/home">{{
$t("message.user.dropdown1") $t("message.user.dropdown1")
}}</el-dropdown-item> }}</el-dropdown-item>
<!-- <el-dropdown-item command="wareHouse">{{ <el-dropdown-item command="wareHouse">{{
$t("message.user.dropdown6") $t("message.user.dropdown6")
}}</el-dropdown-item> }}</el-dropdown-item>
<el-dropdown-item command="/personal">{{ <el-dropdown-item command="/personal">{{
@@ -108,7 +108,7 @@
}}</el-dropdown-item> }}</el-dropdown-item>
<el-dropdown-item command="/401">{{ <el-dropdown-item command="/401">{{
$t("message.user.dropdown4") $t("message.user.dropdown4")
}}</el-dropdown-item> --> }}</el-dropdown-item>
<el-dropdown-item divided command="logOut">{{ <el-dropdown-item divided command="logOut">{{
$t("message.user.dropdown5") $t("message.user.dropdown5")
}}</el-dropdown-item> }}</el-dropdown-item>
@@ -132,14 +132,13 @@ export default {
isShowUserNewsPopover: false, isShowUserNewsPopover: false,
disabledI18n: "zh-cn", disabledI18n: "zh-cn",
disabledSize: "", disabledSize: "",
UserInformation: {},
}; };
}, },
computed: { computed: {
// 获取用户信息 // 获取用户信息
// getUserInfos() { getUserInfos() {
// return this.$store.state.userInfos.userInfosDD; return this.$store.state.userInfos.userInfos;
// }, },
// 设置弹性盒子布局 flex // 设置弹性盒子布局 flex
layoutUserFlexNum() { layoutUserFlexNum() {
let { layout, isClassicSplitMenu } = this.$store.state.themeConfig.themeConfig; let { layout, isClassicSplitMenu } = this.$store.state.themeConfig.themeConfig;
@@ -155,13 +154,11 @@ export default {
}, },
}, },
mounted() { mounted() {
this.resetUserInformation();
if (Local.get("themeConfigPrev")) { if (Local.get("themeConfigPrev")) {
this.initI18n(); this.initI18n();
this.initComponentSize(); this.initComponentSize();
} }
}, },
methods: { methods: {
// 搜索点击 // 搜索点击
onSearchClick() { onSearchClick() {
@@ -269,16 +266,11 @@ export default {
.catch(() => {}); .catch(() => {});
}, 150); }, 150);
} else if (path === "wareHouse") { } else if (path === "wareHouse") {
window.open("http://www.baidu.com"); window.open("https://gitee.com/lyt-top/vue-next-admin");
} else { } else {
this.$router.push(path); this.$router.push(path);
} }
}, },
// 重置DD用户信息
resetUserInformation() {
let res = Session.get("userInfoDD");
this.UserInformation = res;
},
}, },
}; };
</script> </script>
src/router/index.js
+7 -81
View File
@@ -6,9 +6,7 @@ import 'nprogress/nprogress.css';
import { Session } from '@/utils/storage'; import { Session } from '@/utils/storage';
import { PrevLoading } from '@/utils/loading.js'; import { PrevLoading } from '@/utils/loading.js';
import { useMenuApi } from '@/api/menu'; import { useMenuApi } from '@/api/menu';
import adminbendirout from '../../public/admin' import adminbendirout from '../../public/admin';
// import config from "/package.json";
const menuApi = useMenuApi(); const menuApi = useMenuApi();
@@ -45,7 +43,6 @@ const staticRoutes = [
title: '登录', title: '登录',
}, },
}, },
{ {
path: '/404', path: '/404',
name: 'notFound', name: 'notFound',
@@ -67,24 +64,11 @@ const staticRoutes = [
// 加载静态路由 // 加载静态路由
const createRouter = () => const createRouter = () =>
new VueRouter({ new VueRouter({
// mode: 'history',
routes: staticRoutes, routes: staticRoutes,
base: '/',
}); });
// 创建路由 // 创建路由
const router = createRouter(); const router = createRouter();
// 处理错误路由
router.onError((error) => {
const pattern = /Loading chunk (\d)+ failed/g;
const isChunkLoadFailed = error.message.match(pattern);
if (isChunkLoadFailed) {
window.location.reload();
router.replace(router.history.pending.fullPath);
}else{
console.log(error)
}
});
// 加载 loading // 加载 loading
PrevLoading.start(); PrevLoading.start();
@@ -189,38 +173,6 @@ export function dynamicRouter(routes) {
}); });
} }
// 处理后端传来的路由表进行过滤操作
// 定义一个函数，用于过滤本地路由表
function filterLocalRoutes(localRoutes, backendRoutes) {
const backendPaths = getRoutePaths(backendRoutes);
function filterRoutes(routes) {
return routes.filter((route) => {
if (backendPaths.includes(route.path)) {
return true;
} else if (route.children) {
route.children = filterRoutes(route.children);
return route.children.length > 0;
} else {
return false;
}
});
}
return filterRoutes(localRoutes);
}
// 获取后端路由中所有的 path 值数组
function getRoutePaths(routes) {
const paths = [];
routes.forEach((route) => {
if (route.path) {
paths.push(route.path);
}
if (route.children && route.children.length > 0) {
paths.push(...getRoutePaths(route.children));
}
});
return paths;
}
// 添加路由，模拟数据与方法，可自行进行修改 admin // 添加路由，模拟数据与方法，可自行进行修改 admin
// 添加动态路由，`{ path: '*', redirect: '/404' }` 防止页面刷新，静态路由丢失问题 // 添加动态路由，`{ path: '*', redirect: '/404' }` 防止页面刷新，静态路由丢失问题
// next({ ...to, replace: true }) 动态路由 addRoute 完毕后才放行，防止刷新时 NProgress 进度条加载2次 // next({ ...to, replace: true }) 动态路由 addRoute 完毕后才放行，防止刷新时 NProgress 进度条加载2次
@@ -228,12 +180,8 @@ function filterLocalRoutes(localRoutes, backendRoutes) {
export function adminUser(router, to, next) { export function adminUser(router, to, next) {
resetRouter(); resetRouter();
// 发请求获取路由表操作 // 发请求获取路由表操作
// let parameter = {
// clientName:config.name,
// version:config.version,
// }
// menuApi // menuApi
// .getMenuAdmin(parameter) // .getMenuAdmin()
// .then(async (res) => { // .then(async (res) => {
// // 获取路由表 // // 获取路由表
// console.log(res.data); // console.log(res.data);
@@ -249,39 +197,17 @@ export function adminUser(router, to, next) {
// next({ ...to, replace: true }); // next({ ...to, replace: true });
// }) // })
// .catch(() => {}); // .catch(() => {});
// 本地数据路由表操作 // 本地数据路由表操作
let routingTable = sessionStorage.getItem('smart-campus:userInfoDD') console.log(adminbendirout);
let value = JSON.parse(routingTable);
console.log(value.authorities);
let filteredLocalRoutes = filterLocalRoutes(adminbendirout.data, value.authorities)
let home ={
path: "/home",
name: "home",
component: "home",
meta: {
"title": "message.router.home",
"isLink": "",
"isHide": false,
"isKeepAlive": true,
"isAffix": true,
"isIframe": false,
"roles": ["admin", "common"],
"icon": "iconfont icon-shouye"
}
}
filteredLocalRoutes.unshift(home)
console.log(filteredLocalRoutes);;
store.dispatch('userInfos/setUserInfos'); store.dispatch('userInfos/setUserInfos');
store.dispatch('routesList/setRoutesList', setFilterMenuFun(filteredLocalRoutes, store.state.userInfos.userInfos.roles)); store.dispatch('routesList/setRoutesList', setFilterMenuFun(adminbendirout.data, store.state.userInfos.userInfos.roles));
dynamicRoutes[0].children = filteredLocalRoutes; dynamicRoutes[0].children = adminbendirout.data;
const awaitRoute = dynamicRouter(dynamicRoutes); const awaitRoute = dynamicRouter(dynamicRoutes);
[...awaitRoute, { path: '*', redirect: '/404' }].forEach((route) => { [...awaitRoute, { path: '*', redirect: '/404' }].forEach((route) => {
router.addRoute({ ...route }); router.addRoute({ ...route });
}); });
setCacheTagsViewRoutes(JSON.parse(JSON.stringify(filteredLocalRoutes))); setCacheTagsViewRoutes(JSON.parse(JSON.stringify(adminbendirout.data)));
next({ ...to, replace: true }); next({ ...to, replace: true });
} }
src/utils/request.js
+7 -30
View File
@@ -3,30 +3,21 @@ import router, { resetRouter } from '@/router/index';
import axios from 'axios'; import axios from 'axios';
import { Message, MessageBox } from 'element-ui'; import { Message, MessageBox } from 'element-ui';
import { Session } from '@/utils/storage'; import { Session } from '@/utils/storage';
import { setTimeout } from 'core-js';
// 创建 axios 实例 // 创建 axios 实例
const service = axios.create({ const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, baseURL: process.env.VUE_APP_BASE_API,
timeout: 50000, timeout: 50000,
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
}); });
// 添加请求拦截器 // 添加请求拦截器
service.interceptors.request.use( service.interceptors.request.use(
(config) => { (config) => {
// 在发送请求之前做些什么 token // 在发送请求之前做些什么 token
if (Session.get('token')) { if (Session.get('token')) {
// 带头部token
config.headers.common['Authorization'] = `${Session.get('token')}`; config.headers.common['Authorization'] = `${Session.get('token')}`;
} }
let params = config.params
let newData = {}
for( let key in params){
if( params[key] !== null && params[key] !== ''){
newData[key] = params[key]
}
}
config.params = newData
console.log(config)
return config; return config;
}, },
(error) => { (error) => {
@@ -40,9 +31,7 @@ service.interceptors.response.use(
(response) => { (response) => {
// 对响应数据做点什么 // 对响应数据做点什么
const res = response.data; const res = response.data;
// 根据后端状态码判断 if (res.code && res.code !== 0) {
if (res.code) {
// if (res.code && res.code !== 0 ) {
// `token` 过期或者账号已在别处登录 // `token` 过期或者账号已在别处登录
if (res.code === 401 || res.code === 4001) { if (res.code === 401 || res.code === 4001) {
// 清除浏览器全部临时缓存 // 清除浏览器全部临时缓存
@@ -54,35 +43,23 @@ service.interceptors.response.use(
.then(() => {}) .then(() => {})
.catch(() => {}); .catch(() => {});
} }
return response.data; return Promise.reject(service.interceptors.response.error);
} else { } else {
return Promise.reject(response.data); return response.data;
} }
}, },
(error) => { (error) => {
console.log(error); // 对响应错误做点什么
if (error.message.indexOf('timeout') != -1) { if (error.message.indexOf('timeout') != -1) {
Message.error('网络超时'); Message.error('网络超时');
} else if (error.message == 'Network Error') { } else if (error.message == 'Network Error') {
Message.error('网络连接错误'); Message.error('网络连接错误');
// 错误thenk失效
} else { } else {
// 清除浏览器全部临时缓存 Message.error(error.response.data.message);
// Session.clear();
// router.push('/login');
// store.commit('setMenuData', {});
// resetRouter(); // 重置路由
// MessageBox.alert('你已被登出，请重新登录', '提示', {})
// .then(() => {})
// .catch(() => {});
Message.error(error.response.data.msg || '错误');
} }
return Promise.reject(error); return Promise.reject(error);
} }
); );
// 导出 axios 实例 // 导出 axios 实例
export default service; export default service;
src/views/PaymentSystem/CreatePayment/index.vue
+141 -152
View File
@@ -5,7 +5,6 @@
<el-card shadow="hover" header=""> <el-card shadow="hover" header="">
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" /> <CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
<el-form :model="form" size="small" label-width="100px" class="mt35 mb35"> <el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
<el-row :gutter="35"> <el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20"> <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="校区名称" prop="schoolId"> <el-form-item label="校区名称" prop="schoolId">
@@ -17,9 +16,10 @@
class="w100" class="w100"
> >
<el-option <el-option
v-for="item in schoolArr" v-for="(item, index) in schoolArr"
:label="item.name" :label="item.name"
:value="item.deptId" :value="item.deptId"
:key="index"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -41,11 +41,11 @@
v-model="query.date" v-model="query.date"
type="date" type="date"
value-format="yyyy-MM-dd" value-format="yyyy-MM-dd"
placeholder="选择开始时间"> placeholder="选择开始时间"
>
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-card> </el-card>
@@ -68,7 +68,13 @@
/> />
<!-- 创建缴费 --> <!-- 创建缴费 -->
<el-dialog :title="title" :visible.sync="isVisible" width="30%"> <el-dialog :title="title" :visible.sync="isVisible" width="30%">
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="demo-ruleForm"> <el-form
ref="form"
:model="form"
:rules="rules"
label-width="80px"
class="demo-ruleForm"
>
<el-form-item label="校区名称" prop="schoolId"> <el-form-item label="校区名称" prop="schoolId">
<el-select <el-select
size="mini" size="mini"
@@ -78,9 +84,10 @@
class="w100" class="w100"
> >
<el-option <el-option
v-for="item in schoolArr" v-for="(item, index) in schoolArr"
:label="item.name" :label="item.name"
:value="item.deptId" :value="item.deptId"
:key="index"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -100,7 +107,7 @@
> >
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="结束时间" prop="endTime" > <el-form-item label="结束时间" prop="endTime">
<el-date-picker <el-date-picker
v-model="form.endTime" v-model="form.endTime"
type="datetime" type="datetime"
@@ -124,33 +131,39 @@
<div class="big-box"> <div class="big-box">
<h3>已缴费名单</h3> <h3>已缴费名单</h3>
<div v-if="userArr.length" class="dialog-box"> <div v-if="userArr.length" class="dialog-box">
<div v-for="(item, index) in userArr" class="" :key="index">{{item.name}}</div> <div v-for="(item, index) in userArr" class="" :key="index">
{{ item.name }}
</div> </div>
<div v-else class="dialog-box">
暂无缴费名单
</div> </div>
<div v-else class="dialog-box">暂无缴费名单</div>
<h3>未缴费名单</h3> <h3>未缴费名单</h3>
<div v-if="noUserArr.length" class="dialog-box"> <div v-if="noUserArr.length" class="dialog-box">
<div v-for="(item, index) in noUserArr" class="" :key="index">{{item.name}}</div> <div v-for="(item, index) in noUserArr" class="" :key="index">
{{ item.name }}
</div> </div>
<div v-else class="dialog-box">
暂无缴费名单
</div> </div>
<div v-else class="dialog-box">暂无缴费名单</div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button size="mini" @click="isVisible1 = false">取 消</el-button> <el-button size="mini" @click="isVisible1 = false">取 消</el-button>
<el-button size="mini" type="primary" @click="isVisible1 = false">确定</el-button> <el-button size="mini" type="primary" @click="isVisible1 = false"
>确定</el-button
>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { postAddOrders, getOrders, deleteOrders, getUserOrders, getNoOrders, getOrganization } from './api' import {
import CommonTables from './components/CommonTables.vue' postAddOrders,
getOrders,
deleteOrders,
getUserOrders,
getNoOrders,
getOrganization,
} from "./api";
import CommonTables from "./components/CommonTables.vue";
export default { export default {
name: "CreatePayment", name: "CreatePayment",
data() { data() {
@@ -210,135 +223,119 @@ export default {
}, },
total: 0, // 总页数 total: 0, // 总页数
isVisible: false, // 弹出层 isVisible: false, // 弹出层
isVisible1: false,// 详情状态 isVisible1: false, // 详情状态
title: '新增', // 弹出层按钮 title: "新增", // 弹出层按钮
rules: { rules: {
subject: [ subject: [{ required: true, message: "请输入缴费标题", trigger: "blur" }],
{ required: true, message: '请输入缴费标题', trigger: 'blur' }, money: [{ required: true, message: "请输入缴费金额", trigger: "blur" }],
], schoolId: [{ required: true, message: "请选择校区", trigger: "change" }],
money: [ explain: [{ required: true, message: "请输入缴费说明", trigger: "blur" }],
{ required: true, message: '请输入缴费金额', trigger: 'blur' }, startTime: [{ required: true, message: "请输入开始时间", trigger: "blur" }],
], endTime: [{ required: true, message: "请输入结束时间", trigger: "blur" }],
schoolId: [
{ required: true, message: '请选择校区', trigger: 'change' },
],
explain: [
{ required: true, message: '请输入缴费说明', trigger: 'blur' },
],
startTime: [
{ required: true, message: '请输入开始时间', trigger: 'blur' },
],
endTime: [
{ required: true, message: '请输入结束时间', trigger: 'blur' },
],
}, },
statusArr: ['缴费中', '缴费结束', '删除'], statusArr: ["缴费中", "缴费结束", "删除"],
userArr: [], // 已缴费人员 userArr: [], // 已缴费人员
noUserArr: [], // 未交费人员 noUserArr: [], // 未交费人员
schoolArr: [], // schoolArr: [], //
} };
}, },
components:{ components: {
CommonTables CommonTables,
}, },
created(){ created() {
this.getList() this.getList();
getOrganization(0).then((res) => { getOrganization(0).then((res) => {
console.log(res); console.log(res);
this.schoolArr = res.data; this.schoolArr = res.data;
}); });
}, },
methods:{ methods: {
// 点击确定提交 // 点击确定提交
onClickSubmit(){ onClickSubmit() {
console.log(this.form) console.log(this.form);
this.$refs['form'].validate((valid) => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
let obj = { ...this.form } let obj = { ...this.form };
let startTime = new Date(this.form.startTime) let startTime = new Date(this.form.startTime);
let endTime = new Date(this.form.endTime) let endTime = new Date(this.form.endTime);
obj.startTime = startTime obj.startTime = startTime;
obj.endTime = endTime obj.endTime = endTime;
console.log(startTime) console.log(startTime);
console.log(endTime) console.log(endTime);
postAddOrders(obj).then(res =>{ postAddOrders(obj).then((res) => {
if(res.code == 200){ if (res.code == 200) {
this.getList() this.getList();
this.resetForm() this.resetForm();
this.message() this.message();
this.isVisible = false; this.isVisible = false;
} else {
}else{ this.message("新增失败", "error");
this.message('新增失败', 'error')
} }
}) });
} }
}) });
}, },
// 点击开始时间比较 // 点击开始时间比较
onChangeStartTime() { onChangeStartTime() {
// startTime: null, // 开始时间 // startTime: null, // 开始时间
// endTime: null, // 结束时间 // endTime: null, // 结束时间
let start = (new Date(this.form.startTime)).getTime() let start = new Date(this.form.startTime).getTime();
let end = (new Date(this.form.endTime)).getTime() let end = new Date(this.form.endTime).getTime();
if(this.form.endTime){ if (this.form.endTime) {
if(start > end){ if (start > end) {
this.message('开始时间不能大于结束时间','error') this.message("开始时间不能大于结束时间", "error");
this.form.startTime = null this.form.startTime = null;
} }
} }
}, },
// 点击结束时间比较 // 点击结束时间比较
onChangeEndTime() { onChangeEndTime() {
let start = (new Date(this.form.startTime)).getTime() let start = new Date(this.form.startTime).getTime();
let end = (new Date(this.form.endTime)).getTime() let end = new Date(this.form.endTime).getTime();
console.log(start) console.log(start);
console.log(end) console.log(end);
if(this.form.startTime){ if (this.form.startTime) {
console.log('--------------') console.log("--------------");
if(start > end){ if (start > end) {
console.log('++++++++++++') console.log("++++++++++++");
this.message('开始时间不能大于结束时间','error') this.message("开始时间不能大于结束时间", "error");
this.form.endTime = null this.form.endTime = null;
} }
} }
}, },
// 查看详情 // 查看详情
detailData(row) { detailData(row) {
console.log(row) console.log(row);
console.log('-----------------') console.log("-----------------");
this.isVisible1 = true this.isVisible1 = true;
this.userArr.push('张三返回') this.userArr.push("张三返回");
// for( let i = 0; i < 100; i++){ // for( let i = 0; i < 100; i++){
// this.userArr.push({name: '张三返回'}) // this.userArr.push({name: '张三返回'})
// } // }
// for( let i = 0; i < 100; i++){ // for( let i = 0; i < 100; i++){
// this.noUserArr.push({name: '张三返回'}) // this.noUserArr.push({name: '张三返回'})
// } // }
getUserOrders(row.id).then( res =>{ getUserOrders(row.id).then((res) => {
console.log(res) console.log(res);
this.userArr = res.data this.userArr = res.data;
});
}) getNoOrders(row.id).then((res) => {
getNoOrders(row.id).then(res =>{ this.noUserArr = res.data;
this.noUserArr = res.data });
})
}, },
// 点击新增 // 点击新增
fetchData() { fetchData() {
this.isVisible = true; this.isVisible = true;
this.title = '新增' this.title = "新增";
this.resetForm() this.resetForm();
}, },
// 重置按钮 // 重置按钮
reset() { reset() {
console.log("按钮重置点击了"); console.log("按钮重置点击了");
this.query = { (this.query = {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
schoolId: null, // schoolId: null, //
@@ -347,8 +344,8 @@ export default {
explain: null, // 缴费说明 explain: null, // 缴费说明
date: null, // 开始时间 date: null, // 开始时间
endTime: null, // 结束时间 endTime: null, // 结束时间
}, }),
this.getList() this.getList();
}, },
// 重置表单 // 重置表单
resetForm() { resetForm() {
@@ -359,77 +356,73 @@ export default {
startTime: null, // 开始时间 startTime: null, // 开始时间
endTime: null, // 结束时间 endTime: null, // 结束时间
schoolId: null, // 校区 schoolId: null, // 校区
} };
}, },
// 搜索按钮 // 搜索按钮
search() { search() {
// console.log("搜索了", rew); // console.log("搜索了", rew);
this.query.pageNum = 1 this.query.pageNum = 1;
this.query.pageSize = 10 this.query.pageSize = 10;
this.getList() this.getList();
}, },
// 获取数据 // 获取数据
getList(){ getList() {
getOrders(this.query).then( res =>{ getOrders(this.query).then((res) => {
console.log(res) console.log(res);
this.data = res.data.map(item =>{ this.data = res.data.map((item) => {
item.status = this.statusArr[item.status] item.status = this.statusArr[item.status];
item.startTime = this.formatDate(item.startTime) item.startTime = this.formatDate(item.startTime);
item.endTime = this.formatDate(item.endTime) item.endTime = this.formatDate(item.endTime);
return item return item;
}) });
this.total = res.total this.total = res.total;
}) });
}, },
// 删除 // 删除
deleteData(item) { deleteData(item) {
console.log('------------------------------------------') console.log("------------------------------------------");
console.log(item) console.log(item);
deleteOrders(item.id).then(res =>{ deleteOrders(item.id).then((res) => {
if(res.code == 200){ if (res.code == 200) {
this.getList() this.getList();
this.message('删除成功！') this.message("删除成功！");
}else{ } else {
this.message('删除失败！', 'error') this.message("删除失败！", "error");
} }
}) });
}, },
// 编辑 // 编辑
editData() { editData() {
this.isVisible = true; this.isVisible = true;
this.title = '修改' this.title = "修改";
this.resetForm() this.resetForm();
}, },
// 点击切换页数 // 点击切换页数
onClickCurrent(pageNum){ onClickCurrent(pageNum) {
console.log( '点击切换页数' +pageNum) console.log("点击切换页数" + pageNum);
this.query.pageNum = pageNum this.query.pageNum = pageNum;
this.getList() this.getList();
}, },
// 点击了每页页数 // 点击了每页页数
onClickSize(pageSize){ onClickSize(pageSize) {
console.log( '点击了每页页数' +pageSize) console.log("点击了每页页数" + pageSize);
this.query.pageSize = pageSize this.query.pageSize = pageSize;
this.getList() this.getList();
console.log(pageSize) console.log(pageSize);
}, },
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误 message(message = "新增成功", type = "success") {
// type类型 success成功 warning警告 error错误
this.$message({ this.$message({
message, message,
type type,
}); });
} },
} },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.big-box{ .dialog-box {
}
.dialog-box{
// width: 100%; // width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -437,14 +430,10 @@ export default {
// min-height: 50px; // min-height: 50px;
padding: 20px 0 40px; padding: 20px 0 40px;
overflow: auto; overflow: auto;
div{ div {
padding: 5px 5px; padding: 5px 5px;
box-sizing: border-box; box-sizing: border-box;
// height: 40px; // height: 40px;
} }
} }
</style> </style>
src/views/home/index.vue
+27 -37
View File
@@ -2,38 +2,40 @@
<div class="home"> <div class="home">
<!-- 用户信息 --> <!-- 用户信息 -->
<el-row :gutter="15"> <el-row :gutter="15">
<el-col :md="24" :lg="24" :xl="24" class="mb15"> <el-col :md="24" :lg="16" :xl="16" class="mb15">
<el-card shadow="hover"> <el-card shadow="hover">
<div slot="header"> <div slot="header">
<span>{{ $t("message.card.title1") }}</span> <span>{{ $t("message.card.title1") }}</span>
</div> </div>
<div class="user-item"> <div class="user-item">
<div class="user-item-left"> <div class="user-item-left">
<img :src="userInformation.avatar" /> <img :src="getUserInfos.photo" />
</div> </div>
<div class="user-item-right overflow"> <div class="user-item-right overflow">
<el-row> <el-row>
<el-col :span="24" class="right-title mb15 one-text-overflow" <el-col :span="24" class="right-title mb15 one-text-overflow"
>{{ currentTime }}，{{ userInformation.name }}，{{ dailyMessage }} >{{ currentTime }}，{{ getUserInfos.userName }}，{{ dailyMessage }}
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-col :xs="12" :sm="12" :md="8" class="right-l-v"> <el-col :xs="12" :sm="12" :md="8" class="right-l-v">
<div class="right-label">昵称：</div> <div class="right-label">昵称：</div>
<div class="right-value">{{ userInformation.name }}</div> <div class="right-value">小柒</div>
</el-col> </el-col>
<el-col :xs="12" :sm="12" :md="16" class="right-l-v"> <el-col :xs="12" :sm="12" :md="16" class="right-l-v">
<div class="right-label">身份：</div> <div class="right-label">身份：</div>
<div class="right-value"> <div class="right-value">
{{ identity }} {{ userInfo.userName === "admin" ? "超级管理" : "普通用户" }}
</div> </div>
</el-col> </el-col>
</el-col> </el-col>
<el-col :span="24" class="mt5"> <el-col :span="24" class="mt5">
<el-col :xs="12" :sm="12" :md="8" class="right-l-v"> <el-col :xs="12" :sm="12" :md="8" class="right-l-v">
<div class="right-label one-text-overflow">电话：</div> <div class="right-label one-text-overflow">IP：</div>
<div class="right-value one-text-overflow"> <div class="right-value one-text-overflow">192.168.1.1</div>
{{ userInformation.mobile }} </el-col>
</div> <el-col :xs="12" :sm="12" :md="16" class="right-l-v">
<div class="right-label one-text-overflow">时间：</div>
<div class="right-value one-text-overflow">{{ userInfo.time }}</div>
</el-col> </el-col>
</el-col> </el-col>
<el-col :span="24" class="mt15"> <el-col :span="24" class="mt15">
@@ -49,8 +51,7 @@
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<!-- 消息通知 --> <el-col :md="24" :lg="8" :xl="8" class="mb15">
<!-- <el-col :md="24" :lg="8" :xl="8" class="mb15">
<el-card shadow="hover"> <el-card shadow="hover">
<div slot="header"> <div slot="header">
<span>{{ $t("message.card.title2") }}</span> <span>{{ $t("message.card.title2") }}</span>
@@ -78,18 +79,18 @@
</Scroll> </Scroll>
</div> </div>
</el-card> </el-card>
</el-col> --> </el-col>
</el-row> </el-row>
<div>{{ $t("message.card.title1") }}</div>
</div> </div>
</template> </template>
<script> <script>
import Scroll from "vue-seamless-scroll"; import Scroll from "vue-seamless-scroll";
import { CountUp } from "countup.js";
import { Session } from "@/utils/storage"; import { Session } from "@/utils/storage";
import { formatAxis, formatDate } from "@/utils/formatTime"; import { formatAxis, formatDate } from "@/utils/formatTime";
import { newsInfoList, dailyMessage } from "./mock"; import { newsInfoList, dailyMessage } from "./mock";
import { useLoginApi } from "@/api/login";
const LoginApi = useLoginApi();
export default { export default {
name: "home", name: "home",
components: { Scroll }, components: { Scroll },
@@ -98,23 +99,16 @@ export default {
newsInfoList, newsInfoList,
userInfo: {}, userInfo: {},
dailyMessage: {}, dailyMessage: {},
// 返回的用户信息
userInformation: {
roleList: [{ name: "" }],
},
}; };
}, },
created() { created() {
this.requestToObtainUserInformations(); this.initUserInfo();
this.initDailyMessage(); this.initDailyMessage();
}, },
computed: { computed: {
currentTime() { currentTime() {
return formatAxis(new Date()); return formatAxis(new Date());
}, },
identity() {
return this.userInformation.roleList[0].name;
},
optionSingleHeight() { optionSingleHeight() {
return { return {
singleHeight: 28, singleHeight: 28,
@@ -123,7 +117,7 @@ export default {
}; };
}, },
getUserInfos() { getUserInfos() {
return Session.get("setUserInfosDD"); return this.$store.state.userInfos.userInfos;
}, },
}, },
mounted() {}, mounted() {},
@@ -132,26 +126,22 @@ export default {
initDailyMessage() { initDailyMessage() {
this.dailyMessage = dailyMessage[Math.floor(Math.random() * dailyMessage.length)]; this.dailyMessage = dailyMessage[Math.floor(Math.random() * dailyMessage.length)];
}, },
// 初始化登录信息
initUserInfo() {
if (!Session.get("userInfo")) return false;
this.userInfo = Session.get("userInfo");
this.userInfo.time = formatDate(
new Date(this.userInfo.time),
"YYYY-mm-dd HH:MM:SS"
);
},
// 消息通知当前项点击 // 消息通知当前项点击
onNewsInfoListClick(v) { onNewsInfoListClick(v) {
window.open(v.link); window.open(v.link);
}, },
// 跳转到 gitee // 跳转到 gitee
onOpenGitee() { onOpenGitee() {
window.open("https://www.baidu.com/"); window.open("https://gitee.com/lyt-top/vue-next-admin");
},
// 获取登录信息
async requestToObtainUserInformations() {
try {
let res = await LoginApi.requestToObtainUserInformation();
console.log(res.data);
this.userInformation = res.data;
// 存储钉钉用户信息到浏览器缓存
Session.set("userInfoDD", res.data);
} catch (error) {
Message.error("获取信息失败");
}
}, },
}, },
}; };
src/views/login/index.vue
+65 -107
View File
@@ -24,11 +24,60 @@
<!-- <h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4> --> <!-- <h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4> -->
<h4 class="login-title">数字校园教育管理平台</h4> <h4 class="login-title">数字校园教育管理平台</h4>
<h5>请使用钉钉小程序扫码登录</h5> <h5>请使用钉钉小程序扫码登录</h5>
<div <el-form class="el-form login-form">
v-loading="loading" <el-form-item style="margin-left: 0px" prop="userName">
id="self_defined_element" <el-input
class="self-defined-classname" type="text"
></div> :placeholder="$t('message.login.placeholder1')"
prefix-icon="el-icon-user"
v-model="ruleForm.userName"
clearable
autocomplete="off"
>
</el-input>
</el-form-item>
<el-form-item style="margin-left: 0px" prop="password">
<el-input
type="password"
:placeholder="$t('message.login.placeholder2')"
prefix-icon="el-icon-lock"
v-model="ruleForm.password"
autocomplete="off"
:show-password="true"
>
</el-input>
</el-form-item>
<el-form-item style="margin-left: 0px" prop="code">
<div class="el-row" span="24">
<div class="el-col el-col-16">
<el-input
type="text"
maxlength="4"
:placeholder="$t('message.login.placeholder3')"
prefix-icon="el-icon-position"
v-model="ruleForm.code"
clearable
autocomplete="off"
></el-input>
</div>
<div class="el-col el-col-8">
<div class="login-code">
<span class="login-code-img">1234</span>
</div>
</div>
</div>
</el-form-item>
<el-form-item style="margin: 40px 0px 0">
<el-button
type="primary"
class="login-submit"
@click="submitForm"
:loading="submit.loading"
>
<span>{{ $t("message.login.btnText") }}</span>
</el-button>
</el-form-item>
</el-form>
<div>版本:v2.2</div> <div>版本:v2.2</div>
<!-- 第三方登录友情链接 --> <!-- 第三方登录友情链接 -->
<!-- <div class="login-menu"> <!-- <div class="login-menu">
@@ -58,7 +107,7 @@ import { PrevLoading } from "@/utils/loading.js";
import { quotationsList } from "./mock"; import { quotationsList } from "./mock";
import { useLoginApi } from "@/api/login"; import { useLoginApi } from "@/api/login";
import { Message } from "element-ui"; import { Message } from "element-ui";
import dd from "dingtalk-jsapi";
const LoginApi = useLoginApi(); const LoginApi = useLoginApi();
export default { export default {
@@ -72,22 +121,14 @@ export default {
loading: false, loading: false,
}, },
ruleForm: { ruleForm: {
username: "admin", userName: "admin",
password: "admin123", password: "123456",
code: "", code: "1234",
uuid: "",
}, },
codeUrl: "",
time: { time: {
txt: "", txt: "",
fun: null, fun: null,
}, },
// 验证码开关
captchaEnabled: true,
loading: true,
access_token: "",
userInformation: {},
}; };
}, },
computed: { computed: {
@@ -104,28 +145,7 @@ export default {
this.initTime(); this.initTime();
}, },
mounted() { mounted() {
this.ddlogin();
this.initRandomQuotations(); this.initRandomQuotations();
const _this = this;
// dd.ready参数为回调函数，在环境准备就绪时触发，jsapi的调用需要保证在该回调函数触发后调用，否则无效。
// 加上判断条件
if (dd.env.platform != "notInDingTalk") {
// 说明不是钉钉打开
// 钉钉登录
dd.runtime.permission.requestAuthCode({
corpId: "dingibrrfjews8im0ois",
onSuccess: (res) => {
_this.loginToObtain(res.code);
},
onFail: function (err) {},
});
} else {
console.log("不是钉钉打开");
}
setTimeout(() => {
this.loading = false;
}, 2500);
}, },
methods: { methods: {
// 随机语录 // 随机语录
@@ -134,7 +154,6 @@ export default {
Math.floor(Math.random() * this.quotationsList.length) Math.floor(Math.random() * this.quotationsList.length)
]; ];
}, },
// 初始化左上角时间显示 // 初始化左上角时间显示
initTime() { initTime() {
this.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ"); this.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ");
@@ -142,29 +161,10 @@ export default {
this.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ"); this.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ");
}, 1000); }, 1000);
}, },
// 获取thken登录 // 登录按钮点击
async loginToObtain(authCode) {
PrevLoading.start();
try {
let resultIoc = await LoginApi.loginToObtain(authCode);
this.access_token = resultIoc.token_type + " " + resultIoc.access_token;
Session.set("token", this.access_token);
resultIoc.access_token && this.submitForm();
} catch (error) {
PrevLoading.done();
Message.error("不是该组织成员");
}
},
// 获取带thken获取用户信息
async requestToObtainUserInformation() {
try {
let res = await LoginApi.requestToObtainUserInformation();
this.userInformation = res.data;
} catch (error) {
console.log(error);
}
},
submitForm() { submitForm() {
this.submit.loading = true;
// 登录发请求获取用户信息
setTimeout(() => { setTimeout(() => {
let defaultRoles = []; let defaultRoles = [];
let defaultAuthBtnList = []; let defaultAuthBtnList = [];
@@ -184,7 +184,7 @@ export default {
defaultAuthBtnList = testAuthBtnList; defaultAuthBtnList = testAuthBtnList;
} }
const userInfos = { const userInfos = {
userName: this.ruleForm.userName === "admin" ? "admin" : "admin", userName: this.ruleForm.userName === "admin" ? "admin" : "test",
photo: photo:
this.ruleForm.userName === "admin" this.ruleForm.userName === "admin"
? "https://img0.baidu.com/it/u=1833472230,3849481738&fm=253&fmt=auto?w=200&h=200" ? "https://img0.baidu.com/it/u=1833472230,3849481738&fm=253&fmt=auto?w=200&h=200"
@@ -193,21 +193,14 @@ export default {
roles: defaultRoles, roles: defaultRoles,
authBtnList: defaultAuthBtnList, authBtnList: defaultAuthBtnList,
}; };
this.requestToObtainUserInformation();
setTimeout(() => {
console.log(this.userInformation);
// 存储 token 到浏览器缓存 // 存储 token 到浏览器缓存
Session.set("token", this.access_token); Session.set("token", Math.random().toString(36).substr(0));
// 存储用户信息到浏览器缓存 // 存储用户信息到浏览器缓存
Session.set("userInfo", userInfos); Session.set("userInfo", userInfos);
// 存储钉钉用户信息到浏览器缓存
Session.set("userInfoDD", this.userInformation);
// 存储用户信息到vuex // 存储用户信息到vuex
this.$store.dispatch("userInfos/setUserInfos", userInfos); this.$store.dispatch("userInfos/setUserInfos", userInfos);
// 存储用户信息到钉钉vuex PrevLoading.start();
this.$store.dispatch("userInfos/setUserInfosDD", this.userInformation);
this.$router.push("/"); this.$router.push("/");
}, 3000);
setTimeout(() => { setTimeout(() => {
this.$message.success( this.$message.success(
`${this.currentTime}，${this.$t("message.login.signInText")}` `${this.currentTime}，${this.$t("message.login.signInText")}`
@@ -215,49 +208,14 @@ export default {
}, 300); }, 300);
}, 300); }, 300);
}, },
// 扫码登录
ddlogin() {
// STEP3：在需要的时候，调用 window.DTFrameLogin 方法构造登录二维码，并处理登录成功或失败的回调。
window.DTFrameLogin(
{
id: "self_defined_element",
width: 300,
height: 300,
},
{
redirect_uri: encodeURIComponent("http://localhost:9999/#/login"),
// redirect_uri: encodeURIComponent("https://hxhl.lzyyj.com/#/login"),
client_id: "dingxei2cpv2pfq9rmhx",
scope: "openid",
response_type: "code",
state: "xxxxxxxxx",
prompt: "consent",
},
(loginResult) => {
const { redirectUrl, authCode, state } = loginResult;
// 这里可以直接进行重定向
// window.location.href = redirectUrl;
this.loginToObtain(authCode);
// 也可以在不跳转页面的情况下，使用code进行授权
},
(errorMsg) => {
// 这里一般需要展示登录失败的具体原因
alert(`Login Error: ${errorMsg}`);
}
);
},
}, },
destroyed() { destroyed() {
clearInterval(this.time.fun); clearInterval(this.time.fun);
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
/* STEP2：指定这个包裹容器元素的CSS样式，尤其注意宽高的设置 */
.self-defined-classname {
width: 300px;
height: 300px;
}
.login { .login {
height: 100%; height: 100%;
width: 100%; width: 100%;