1
This commit is contained in:
hezhidong
@@ -3,35 +3,35 @@
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<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-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="校区名称" prop="schoolId">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="query.schoolId"
|
||||
placeholder="请选择校区"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in schoolArr"
|
||||
:label="item.name"
|
||||
:value="item.deptId"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-row :gutter="35"> -->
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="校区名称" prop="schoolId">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="query.schoolId"
|
||||
placeholder="请选择校区"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in schoolArr"
|
||||
:label="item.name"
|
||||
:value="item.deptId"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-row :gutter="35"> -->
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="缴费标题" prop="subject">
|
||||
<el-input size="mini" v-model="query.subject"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="缴费金额" prop="money">
|
||||
<el-form-item label="缴费金额" prop="money">
|
||||
<el-input size="mini" type="number" v-model="query.money"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@@ -41,11 +41,11 @@
|
||||
v-model="query.date"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择开始时间">
|
||||
placeholder="选择开始时间"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
@@ -58,17 +58,23 @@
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTables>
|
||||
<Pagination
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<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-select
|
||||
size="mini"
|
||||
@@ -78,16 +84,17 @@
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in schoolArr"
|
||||
v-for="(item, index) in schoolArr"
|
||||
:label="item.name"
|
||||
:value="item.deptId"
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费标题" prop="subject">
|
||||
<el-input size="mini" v-model="form.subject"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费金额" prop="money">
|
||||
<el-form-item label="缴费金额" prop="money">
|
||||
<el-input size="mini" type="number" v-model="form.money"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
@@ -100,14 +107,14 @@
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime" >
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-date-picker
|
||||
v-model="form.endTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择结束时间"
|
||||
@change="onChangeEndTime"
|
||||
>
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费说明" prop="explain">
|
||||
@@ -123,34 +130,40 @@
|
||||
<el-dialog title="缴费详细" :visible.sync="isVisible1" width="30%">
|
||||
<div class="big-box">
|
||||
<h3>已缴费名单</h3>
|
||||
<div v-if="userArr.length" class="dialog-box">
|
||||
<div v-for="(item, index) in userArr" class="" :key="index">{{item.name}}</div>
|
||||
<div v-if="userArr.length" class="dialog-box">
|
||||
<div v-for="(item, index) in userArr" class="" :key="index">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div v-else class="dialog-box">
|
||||
暂无缴费名单
|
||||
</div>
|
||||
<h3>未缴费名单</h3>
|
||||
<div v-if="noUserArr.length" class="dialog-box">
|
||||
<div v-for="(item, index) in noUserArr" class="" :key="index">{{item.name}}</div>
|
||||
</div>
|
||||
<div v-else class="dialog-box">
|
||||
暂无缴费名单
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible1 = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="isVisible1 = false">确定</el-button>
|
||||
</div>
|
||||
<div v-else class="dialog-box">暂无缴费名单</div>
|
||||
<h3>未缴费名单</h3>
|
||||
<div v-if="noUserArr.length" class="dialog-box">
|
||||
<div v-for="(item, index) in noUserArr" class="" :key="index">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="dialog-box">暂无缴费名单</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible1 = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="isVisible1 = false"
|
||||
>确定</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postAddOrders, getOrders, deleteOrders, getUserOrders, getNoOrders, getOrganization } from './api'
|
||||
import CommonTables from './components/CommonTables.vue'
|
||||
import {
|
||||
postAddOrders,
|
||||
getOrders,
|
||||
deleteOrders,
|
||||
getUserOrders,
|
||||
getNoOrders,
|
||||
getOrganization,
|
||||
} from "./api";
|
||||
import CommonTables from "./components/CommonTables.vue";
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
@@ -189,7 +202,7 @@ export default {
|
||||
prop: "startTime",
|
||||
},
|
||||
{
|
||||
label: "结束时间",
|
||||
label: "结束时间",
|
||||
prop: "endTime",
|
||||
},
|
||||
{
|
||||
@@ -202,7 +215,7 @@ export default {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
schoolId: null,
|
||||
subject: null, // 缴费标题
|
||||
subject: null, // 缴费标题
|
||||
money: null, // 金额
|
||||
explain: null, // 缴费说明
|
||||
date: null, // 开始时间
|
||||
@@ -210,226 +223,206 @@ export default {
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
isVisible1: false,// 详情状态
|
||||
title: '新增', // 弹出层按钮
|
||||
isVisible1: false, // 详情状态
|
||||
title: "新增", // 弹出层按钮
|
||||
rules: {
|
||||
subject: [
|
||||
{ required: true, message: '请输入缴费标题', trigger: 'blur' },
|
||||
],
|
||||
money: [
|
||||
{ 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' },
|
||||
],
|
||||
subject: [{ required: true, message: "请输入缴费标题", trigger: "blur" }],
|
||||
money: [{ 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: [], // 已缴费人员
|
||||
noUserArr: [], // 未交费人员
|
||||
schoolArr: [], //
|
||||
}
|
||||
schoolArr: [], //
|
||||
};
|
||||
},
|
||||
components:{
|
||||
CommonTables
|
||||
components: {
|
||||
CommonTables,
|
||||
},
|
||||
created(){
|
||||
this.getList()
|
||||
created() {
|
||||
this.getList();
|
||||
getOrganization(0).then((res) => {
|
||||
console.log(res);
|
||||
this.schoolArr = res.data;
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
methods: {
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let obj = { ...this.form }
|
||||
let startTime = new Date(this.form.startTime)
|
||||
let endTime = new Date(this.form.endTime)
|
||||
obj.startTime = startTime
|
||||
obj.endTime = endTime
|
||||
console.log(startTime)
|
||||
console.log(endTime)
|
||||
postAddOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
onClickSubmit() {
|
||||
console.log(this.form);
|
||||
|
||||
}else{
|
||||
this.message('新增失败', 'error')
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
let obj = { ...this.form };
|
||||
let startTime = new Date(this.form.startTime);
|
||||
let endTime = new Date(this.form.endTime);
|
||||
obj.startTime = startTime;
|
||||
obj.endTime = endTime;
|
||||
console.log(startTime);
|
||||
console.log(endTime);
|
||||
postAddOrders(obj).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.getList();
|
||||
this.resetForm();
|
||||
this.message();
|
||||
this.isVisible = false;
|
||||
} else {
|
||||
this.message("新增失败", "error");
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
// 点击开始时间比较
|
||||
onChangeStartTime() {
|
||||
// startTime: null, // 开始时间
|
||||
// endTime: null, // 结束时间
|
||||
let start = (new Date(this.form.startTime)).getTime()
|
||||
let end = (new Date(this.form.endTime)).getTime()
|
||||
if(this.form.endTime){
|
||||
if(start > end){
|
||||
this.message('开始时间不能大于结束时间','error')
|
||||
this.form.startTime = null
|
||||
|
||||
let start = new Date(this.form.startTime).getTime();
|
||||
let end = new Date(this.form.endTime).getTime();
|
||||
if (this.form.endTime) {
|
||||
if (start > end) {
|
||||
this.message("开始时间不能大于结束时间", "error");
|
||||
this.form.startTime = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 点击结束时间比较
|
||||
onChangeEndTime() {
|
||||
let start = (new Date(this.form.startTime)).getTime()
|
||||
let end = (new Date(this.form.endTime)).getTime()
|
||||
console.log(start)
|
||||
console.log(end)
|
||||
if(this.form.startTime){
|
||||
console.log('--------------')
|
||||
if(start > end){
|
||||
console.log('++++++++++++')
|
||||
this.message('开始时间不能大于结束时间','error')
|
||||
|
||||
this.form.endTime = null
|
||||
let start = new Date(this.form.startTime).getTime();
|
||||
let end = new Date(this.form.endTime).getTime();
|
||||
console.log(start);
|
||||
console.log(end);
|
||||
if (this.form.startTime) {
|
||||
console.log("--------------");
|
||||
if (start > end) {
|
||||
console.log("++++++++++++");
|
||||
this.message("开始时间不能大于结束时间", "error");
|
||||
|
||||
this.form.endTime = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 查看详情
|
||||
detailData(row) {
|
||||
console.log(row)
|
||||
console.log('-----------------')
|
||||
this.isVisible1 = true
|
||||
this.userArr.push('张三返回')
|
||||
console.log(row);
|
||||
console.log("-----------------");
|
||||
this.isVisible1 = true;
|
||||
this.userArr.push("张三返回");
|
||||
// for( let i = 0; i < 100; i++){
|
||||
// this.userArr.push({name: '张三返回'})
|
||||
// }
|
||||
// for( let i = 0; i < 100; i++){
|
||||
// this.noUserArr.push({name: '张三返回'})
|
||||
// }
|
||||
getUserOrders(row.id).then( res =>{
|
||||
console.log(res)
|
||||
this.userArr = res.data
|
||||
|
||||
})
|
||||
getNoOrders(row.id).then(res =>{
|
||||
this.noUserArr = res.data
|
||||
|
||||
})
|
||||
getUserOrders(row.id).then((res) => {
|
||||
console.log(res);
|
||||
this.userArr = res.data;
|
||||
});
|
||||
getNoOrders(row.id).then((res) => {
|
||||
this.noUserArr = res.data;
|
||||
});
|
||||
},
|
||||
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增'
|
||||
this.resetForm()
|
||||
this.title = "新增";
|
||||
this.resetForm();
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
(this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
schoolId: null, //
|
||||
subject: null, // 缴费标题
|
||||
schoolId: null, //
|
||||
subject: null, // 缴费标题
|
||||
money: null, // 金额
|
||||
explain: null, // 缴费说明
|
||||
date: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
},
|
||||
this.getList()
|
||||
}),
|
||||
this.getList();
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
this.form = {
|
||||
money: null, // 金额
|
||||
subject: null, // 缴费标题
|
||||
subject: null, // 缴费标题
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
schoolId: null, // 校区
|
||||
}
|
||||
};
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
// console.log("搜索了", rew);
|
||||
this.query.pageNum = 1
|
||||
this.query.pageSize = 10
|
||||
this.getList()
|
||||
this.query.pageNum = 1;
|
||||
this.query.pageSize = 10;
|
||||
this.getList();
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getOrders(this.query).then( res =>{
|
||||
console.log(res)
|
||||
this.data = res.data.map(item =>{
|
||||
item.status = this.statusArr[item.status]
|
||||
item.startTime = this.formatDate(item.startTime)
|
||||
item.endTime = this.formatDate(item.endTime)
|
||||
return item
|
||||
})
|
||||
this.total = res.total
|
||||
})
|
||||
getList() {
|
||||
getOrders(this.query).then((res) => {
|
||||
console.log(res);
|
||||
this.data = res.data.map((item) => {
|
||||
item.status = this.statusArr[item.status];
|
||||
item.startTime = this.formatDate(item.startTime);
|
||||
item.endTime = this.formatDate(item.endTime);
|
||||
return item;
|
||||
});
|
||||
this.total = res.total;
|
||||
});
|
||||
},
|
||||
// 删除
|
||||
deleteData(item) {
|
||||
console.log('------------------------------------------')
|
||||
console.log(item)
|
||||
deleteOrders(item.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.message('删除成功！')
|
||||
}else{
|
||||
this.message('删除失败！', 'error')
|
||||
console.log("------------------------------------------");
|
||||
console.log(item);
|
||||
deleteOrders(item.id).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.getList();
|
||||
this.message("删除成功！");
|
||||
} else {
|
||||
this.message("删除失败！", "error");
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
// 编辑
|
||||
editData() {
|
||||
this.isVisible = true;
|
||||
this.title = '修改'
|
||||
this.resetForm()
|
||||
|
||||
this.title = "修改";
|
||||
this.resetForm();
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum){
|
||||
console.log( '点击切换页数' +pageNum)
|
||||
this.query.pageNum = pageNum
|
||||
this.getList()
|
||||
onClickCurrent(pageNum) {
|
||||
console.log("点击切换页数" + pageNum);
|
||||
this.query.pageNum = pageNum;
|
||||
this.getList();
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize){
|
||||
console.log( '点击了每页页数' +pageSize)
|
||||
this.query.pageSize = pageSize
|
||||
this.getList()
|
||||
console.log(pageSize)
|
||||
onClickSize(pageSize) {
|
||||
console.log("点击了每页页数" + pageSize);
|
||||
this.query.pageSize = pageSize;
|
||||
this.getList();
|
||||
console.log(pageSize);
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
message(message = "新增成功", type = "success") {
|
||||
// type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
type,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.big-box{
|
||||
|
||||
}
|
||||
.dialog-box{
|
||||
.dialog-box {
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -437,14 +430,10 @@ export default {
|
||||
// min-height: 50px;
|
||||
padding: 20px 0 40px;
|
||||
overflow: auto;
|
||||
div{
|
||||
padding: 5px 5px;
|
||||
box-sizing: border-box;
|
||||
// height: 40px;
|
||||
|
||||
}
|
||||
div {
|
||||
padding: 5px 5px;
|
||||
box-sizing: border-box;
|
||||
// height: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
+27
-37
@@ -2,38 +2,40 @@
|
||||
<div class="home">
|
||||
<!-- 用户信息 -->
|
||||
<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">
|
||||
<div slot="header">
|
||||
<span>{{ $t("message.card.title1") }}</span>
|
||||
</div>
|
||||
<div class="user-item">
|
||||
<div class="user-item-left">
|
||||
<img :src="userInformation.avatar" />
|
||||
<img :src="getUserInfos.photo" />
|
||||
</div>
|
||||
<div class="user-item-right overflow">
|
||||
<el-row>
|
||||
<el-col :span="24" class="right-title mb15 one-text-overflow"
|
||||
>{{ currentTime }}，{{ userInformation.name }}，{{ dailyMessage }}
|
||||
>{{ currentTime }}，{{ getUserInfos.userName }}，{{ dailyMessage }}
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-col :xs="12" :sm="12" :md="8" class="right-l-v">
|
||||
<div class="right-label">昵称：</div>
|
||||
<div class="right-value">{{ userInformation.name }}</div>
|
||||
<div class="right-value">小柒</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="16" class="right-l-v">
|
||||
<div class="right-label">身份：</div>
|
||||
<div class="right-value">
|
||||
{{ identity }}
|
||||
{{ userInfo.userName === "admin" ? "超级管理" : "普通用户" }}
|
||||
</div>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mt5">
|
||||
<el-col :xs="12" :sm="12" :md="8" class="right-l-v">
|
||||
<div class="right-label one-text-overflow">电话：</div>
|
||||
<div class="right-value one-text-overflow">
|
||||
{{ userInformation.mobile }}
|
||||
</div>
|
||||
<div class="right-label one-text-overflow">IP：</div>
|
||||
<div class="right-value one-text-overflow">192.168.1.1</div>
|
||||
</el-col>
|
||||
<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 :span="24" class="mt15">
|
||||
@@ -49,8 +51,7 @@
|
||||
</div>
|
||||
</el-card>
|
||||
</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">
|
||||
<div slot="header">
|
||||
<span>{{ $t("message.card.title2") }}</span>
|
||||
@@ -78,18 +79,18 @@
|
||||
</Scroll>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>{{ $t("message.card.title1") }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Scroll from "vue-seamless-scroll";
|
||||
import { CountUp } from "countup.js";
|
||||
import { Session } from "@/utils/storage";
|
||||
import { formatAxis, formatDate } from "@/utils/formatTime";
|
||||
import { newsInfoList, dailyMessage } from "./mock";
|
||||
import { useLoginApi } from "@/api/login";
|
||||
const LoginApi = useLoginApi();
|
||||
export default {
|
||||
name: "home",
|
||||
components: { Scroll },
|
||||
@@ -98,23 +99,16 @@ export default {
|
||||
newsInfoList,
|
||||
userInfo: {},
|
||||
dailyMessage: {},
|
||||
// 返回的用户信息
|
||||
userInformation: {
|
||||
roleList: [{ name: "" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.requestToObtainUserInformations();
|
||||
this.initUserInfo();
|
||||
this.initDailyMessage();
|
||||
},
|
||||
computed: {
|
||||
currentTime() {
|
||||
return formatAxis(new Date());
|
||||
},
|
||||
identity() {
|
||||
return this.userInformation.roleList[0].name;
|
||||
},
|
||||
optionSingleHeight() {
|
||||
return {
|
||||
singleHeight: 28,
|
||||
@@ -123,7 +117,7 @@ export default {
|
||||
};
|
||||
},
|
||||
getUserInfos() {
|
||||
return Session.get("setUserInfosDD");
|
||||
return this.$store.state.userInfos.userInfos;
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
@@ -132,26 +126,22 @@ export default {
|
||||
initDailyMessage() {
|
||||
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) {
|
||||
window.open(v.link);
|
||||
},
|
||||
// 跳转到 gitee
|
||||
onOpenGitee() {
|
||||
window.open("https://www.baidu.com/");
|
||||
},
|
||||
// 获取登录信息
|
||||
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("获取信息失败");
|
||||
}
|
||||
window.open("https://gitee.com/lyt-top/vue-next-admin");
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
+71
-113
@@ -24,11 +24,60 @@
|
||||
<!-- <h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4> -->
|
||||
<h4 class="login-title">数字校园教育管理平台</h4>
|
||||
<h5>请使用钉钉小程序扫码登录</h5>
|
||||
<div
|
||||
v-loading="loading"
|
||||
id="self_defined_element"
|
||||
class="self-defined-classname"
|
||||
></div>
|
||||
<el-form class="el-form login-form">
|
||||
<el-form-item style="margin-left: 0px" prop="userName">
|
||||
<el-input
|
||||
type="text"
|
||||
: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 class="login-menu">
|
||||
@@ -58,7 +107,7 @@ import { PrevLoading } from "@/utils/loading.js";
|
||||
import { quotationsList } from "./mock";
|
||||
import { useLoginApi } from "@/api/login";
|
||||
import { Message } from "element-ui";
|
||||
import dd from "dingtalk-jsapi";
|
||||
|
||||
const LoginApi = useLoginApi();
|
||||
|
||||
export default {
|
||||
@@ -72,22 +121,14 @@ export default {
|
||||
loading: false,
|
||||
},
|
||||
ruleForm: {
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
code: "",
|
||||
uuid: "",
|
||||
userName: "admin",
|
||||
password: "123456",
|
||||
code: "1234",
|
||||
},
|
||||
codeUrl: "",
|
||||
time: {
|
||||
txt: "",
|
||||
fun: null,
|
||||
},
|
||||
// 验证码开关
|
||||
captchaEnabled: true,
|
||||
|
||||
loading: true,
|
||||
access_token: "",
|
||||
userInformation: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -104,28 +145,7 @@ export default {
|
||||
this.initTime();
|
||||
},
|
||||
mounted() {
|
||||
this.ddlogin();
|
||||
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: {
|
||||
// 随机语录
|
||||
@@ -134,7 +154,6 @@ export default {
|
||||
Math.floor(Math.random() * this.quotationsList.length)
|
||||
];
|
||||
},
|
||||
|
||||
// 初始化左上角时间显示
|
||||
initTime() {
|
||||
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");
|
||||
}, 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() {
|
||||
this.submit.loading = true;
|
||||
// 登录发请求获取用户信息
|
||||
setTimeout(() => {
|
||||
let defaultRoles = [];
|
||||
let defaultAuthBtnList = [];
|
||||
@@ -184,7 +184,7 @@ export default {
|
||||
defaultAuthBtnList = testAuthBtnList;
|
||||
}
|
||||
const userInfos = {
|
||||
userName: this.ruleForm.userName === "admin" ? "admin" : "admin",
|
||||
userName: this.ruleForm.userName === "admin" ? "admin" : "test",
|
||||
photo:
|
||||
this.ruleForm.userName === "admin"
|
||||
? "https://img0.baidu.com/it/u=1833472230,3849481738&fm=253&fmt=auto?w=200&h=200"
|
||||
@@ -193,21 +193,14 @@ export default {
|
||||
roles: defaultRoles,
|
||||
authBtnList: defaultAuthBtnList,
|
||||
};
|
||||
this.requestToObtainUserInformation();
|
||||
setTimeout(() => {
|
||||
console.log(this.userInformation);
|
||||
// 存储 token 到浏览器缓存
|
||||
Session.set("token", this.access_token);
|
||||
// 存储用户信息到浏览器缓存
|
||||
Session.set("userInfo", userInfos);
|
||||
// 存储钉钉用户信息到浏览器缓存
|
||||
Session.set("userInfoDD", this.userInformation);
|
||||
// 存储用户信息到vuex
|
||||
this.$store.dispatch("userInfos/setUserInfos", userInfos);
|
||||
// 存储用户信息到钉钉vuex
|
||||
this.$store.dispatch("userInfos/setUserInfosDD", this.userInformation);
|
||||
this.$router.push("/");
|
||||
}, 3000);
|
||||
// 存储 token 到浏览器缓存
|
||||
Session.set("token", Math.random().toString(36).substr(0));
|
||||
// 存储用户信息到浏览器缓存
|
||||
Session.set("userInfo", userInfos);
|
||||
// 存储用户信息到vuex
|
||||
this.$store.dispatch("userInfos/setUserInfos", userInfos);
|
||||
PrevLoading.start();
|
||||
this.$router.push("/");
|
||||
setTimeout(() => {
|
||||
this.$message.success(
|
||||
`${this.currentTime}，${this.$t("message.login.signInText")}`
|
||||
@@ -215,49 +208,14 @@ export default {
|
||||
}, 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() {
|
||||
clearInterval(this.time.fun);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* STEP2：指定这个包裹容器元素的CSS样式，尤其注意宽高的设置 */
|
||||
.self-defined-classname {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
.login {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user