Skip to content

Z
zj-manage
Commit 9400f471 by eternalcoder
Options

gx

parent 740a261f
Showing with 1122 additions and 55 deletions
src/api/talents.js
......@@ -7,13 +7,14 @@ import {
formatParams1,
config
} from '@/utils/request'
import { baseUrl } from '@/config/index'
/**
* 查询列表
*/
export function getList(params) {
return api(Object.assign(formatParams('POST', params), {
url: `/admin-api/talent/getList`
url: `/admin-api/familyCode/queryList`
}))
}
......@@ -21,17 +22,26 @@ export function getList(params) {
* 查询详情
*/
export function get(params) {
return api(Object.assign(formatParams('POST', params), {
url: `/admin-api/talent/get`
return api(Object.assign(formatParams('GET', params), {
url: `/admin-api/familyCode/detail`
}))
}
/**
* 查询类型
*/
export function getType(params) {
return api1(Object.assign(formatParams1('GET', params), {
url: `${config.proxy}talent/getType?appId=1234`
export function getType() {
return api(Object.assign(formatParams('POST',), {
url: `${baseUrl}/admin-api/familyCode/queryZjCity`
}))
}
/**
* 查询状态
*/
export function getType1() {
return api(Object.assign(formatParams('POST'), {
url: `${baseUrl}/admin-api/familyCode/reviewState`
}))
}
......@@ -48,8 +58,8 @@ export function updateState(params) {
* 操作记录
*/
export function getRecord(params) {
return api1(Object.assign(formatParams1('POST', params), {
url: `${config.proxy}talent/getRecord`
return api(Object.assign(formatParams('GET', params), {
url: `${baseUrl}/admin-api/familyCode/queryRecordList`
}))
}
......
src/config/index.js
const domain = {
// dev: "http://192.168.3.144:8881", // 姚镇接口
// dev: "http://81.69.231.72:8881", // 测试接口
dev: "https://exam.smart-zj.cn:9100/smartExam/", // 新正式接口
// dev: "http://192.168.3.87:8881", // 姚镇接口
dev: "http://81.69.231.72:8881", // 测试接口
// dev: "https://exam.smart-zj.cn:9100/smartExam/", // 新正式接口
};
// 腾讯地图 key
const map = {
......
src/router/index.js
......@@ -7,8 +7,8 @@ const routes = [{
path: '/login',
name: 'login',
component: Login
},
{
},
{
path: "*",
name: "layout",
redirect: "/home",
......@@ -190,9 +190,16 @@ const routes = [{
meta: ['核酸采样结果'],
component: () => import('@/views/NucleicAcid/result.vue')
},
// 核酸采样结果
{
path: '/family-manage',
name: 'familyManage',
meta: ['家庭码'],
component: () => import('@/views/FamilyManage/index.vue')
},
]
},
},
]
const router = new VueRouter({
mode: 'hash',
......
src/views/FamilyManage/index.vue 0 → 100644
<template>
<div class="coldfood">
<div class="search-wrapper">
<el-form
:inline="true"
:model="searchForm"
class="search_form"
style="text-align: left; margin-bottom: 10px"
>
<el-form-item label="姓名" label-width="200">
<el-input
v-model="searchForm.name"
placeholder="请输入姓名"
@keyup.enter.native="onSubmit"
></el-input>
</el-form-item>
<el-form-item label="手机号码">
<el-input
v-model="searchForm.phone"
placeholder="请输入手机号码"
@keyup.enter.native="onSubmit"
>
</el-input>
</el-form-item>
<el-form-item label="居住地址">
<el-select
v-model="searchForm.areaCode"
clearable
placeholder="请输入居住地址"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态码">
<el-select
v-model="searchForm.stateCode"
clearable
placeholder="请输入状态码"
>
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
<!-- 表格 -->
<div class="table-wrapper1">
<table-template
:tableData="tableData"
:tableColumns="tableColumns"
:loading="loading"
:pagination="pagination"
@Jump="jumpPage"
>
<el-table-column fixed="right" label="操作" width="380" align="left">
<template slot-scope="scope">
<el-button type="primary" size="mini" round @click="view(scope.row)"
>查看</el-button
>
<el-button
type="primary"
size="mini"
round
@click="getRecord(scope.row)"
>记录</el-button
>
<!-- 公示期的单子可以暂停公示 -->
<el-button
v-if="scope.row.state === 2"
type="warning"
size="mini"
round
@click="pause(scope.row.talentCode)"
>暂停公示</el-button
>
<!-- 暂停公示的单子可以恢复公示 -->
<el-button
v-if="scope.row.state === 4"
type="success"
size="mini"
round
@click="recover(scope.row.talentCode)"
>恢复公示</el-button
>
<!-- 审核通过后的单子都可以拉入黑名单撤销 -->
<el-button
v-if="
scope.row.state === 2 ||
scope.row.state === 3 ||
scope.row.state === 4
"
type="danger"
size="mini"
round
@click="blacklist(scope.row.talentCode)"
>撤销</el-button
>
<!-- 审核通过后的单子都可以打印-->
<el-button
size="mini"
round
@click="print(scope.row.talentCode, scope.row)"
>打印</el-button
>
</template>
</el-table-column>
</table-template>
</div>
<!-- 表格end -->
<!-- 拒绝对话框 -->
<el-dialog
title="提示"
:visible.sync="refuseDialog"
width="30%"
class="refuseDialog"
:before-close="cancelBtn"
>
<span v-if="flag == 0"
>确定拒绝该人才的申请吗？确定的话请<span style="color: red"
>选择或输入</span
>拒绝原因</span
>
<span v-else>确定通过该人才的申请吗？</span>
<div class="refuseTex" v-if="flag == 0">
<el-input
type="textarea"
autosize
placeholder="请输入拒绝原因"
v-model="refuseTextarea"
>
</el-input>
</div>
<div v-else>
<el-select
v-model="refuseValue"
placeholder="请选择拒绝原因"
@change="refuseSelect"
>
<el-option
v-for="item in refuseOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelBtn">取 消</el-button>
<el-button type="primary" @click="successBtn">确 定</el-button>
</span>
</el-dialog>
<!-- 人才详情的对话框 -->
<el-dialog
title="人才详情"
:visible.sync="viewShow"
width="800px"
:close-on-press-escape="false"
@close="showEdu = false"
>
<div class="content">
<!-- 开始 -->
<div style="background: #f3f4f6">
<div class="cell">
<p class="label">家庭码</p>
<p class="value">{{ viewDetail.familyCode }}</p>
</div>
<div class="cell">
<p class="label">姓名</p>
<p class="value">{{ viewDetail.name }}</p>
</div>
<div class="cell">
<p class="label">uid</p>
<p class="value">{{ viewDetail.userId }}</p>
</div>
<div class="cell">
<p class="label">证件</p>
<p class="value">{{ viewDetail.idCard }}</p>
</div>
<div class="cell">
<p class="label">户籍</p>
<p class="value">{{ viewDetail.domicile }}</p>
</div>
<div class="cell">
<p class="label">现居市区</p>
<p class="value">{{ viewDetail.area }}</p>
</div>
<div class="cell">
<p class="label">市区码</p>
<p class="value">{{ viewDetail.areaCode }}</p>
</div>
<div class="cell">
<p class="label">电话</p>
<p class="value">{{ viewDetail.phone }}</p>
</div>
<div class="cell">
<p class="label">工作单位</p>
<p class="value">{{ viewDetail.workUnit }}</p>
</div>
<div class="cell">
<p class="label">婚姻状况</p>
<p class="value">{{ viewDetail.marriageState }}</p>
</div>
<div class="cell">
<p class="label">婚姻状况编码</p>
<p class="value">{{ viewDetail.marriageCode }}</p>
</div>
<div class="cell">
<p class="label">结婚日期</p>
<p class="value">{{ viewDetail.weddingDate }}</p>
</div>
<div class="cell">
<p class="label">是否有孩子</p>
<p class="value">{{ viewDetail.haveChildren }}</p>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<!-- 申请的单子有通过拒绝-->
<el-button type="danger" size="mini" round @click="deny(viewRow)"
>拒绝
</el-button>
<!-- 通过 -->
<el-button type="success" size="mini" round @click="pass(viewRow)"
>通过
</el-button>
</span>
</el-dialog>
<el-dialog
title="操作记录"
:visible.sync="recordShow"
width="800px"
:close-on-press-escape="false"
>
<div class="content">
<template v-if="record && record.length > 0">
<div class="cell" :key="index" v-for="(item, index) in record">
<p class="label" style="margin-right: 20px">
{{ item?.state }}
<span v-if="item?.record">({{ item?.record }})</span>
</p>
<div class="info">
<p class="item">操作人：{{ item?.departName }}</p>
<p class="item">操作时间：{{ item?.createTime }}</p>
</div>
</div>
</template>
<p v-else>暂无记录~</p>
</div>
</el-dialog>
</div>
</template>
<script>
import TableTemplate from '@/components/Table';
// import { changeList } from '@/utils';
import {
getList,
updateState,
get,
getRecord,
getBranch,
getType,
getType1,
educationState,
educationQuery,
} from '@/api/talents';
import { Message } from 'element-ui';
import docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import JSZipUtils from 'jszip-utils';
import { saveAs } from 'file-saver';
let stateArr = [
{
state: '',
stateName: '全部',
color: '',
},
{
state: 1,
stateName: '待审核',
type: 'warning',
},
{
state: 2,
stateName: '公示中',
type: 'warning',
},
{
state: 3,
stateName: '已发码',
type: 'success',
},
{
state: 4,
stateName: '公示暂停',
type: 'info',
},
{
state: 5,
stateName: '审核拒绝',
type: 'warning',
},
{
state: 6,
stateName: '管理撤销',
type: 'danger',
},
{
state: 7,
stateName: '强制更新',
type: 'danger',
},
];
export default {
components: { TableTemplate },
data() {
return {
refuseDialog: false,
refuseValue: '',
refuseTextarea: null,
refuseCode: '',
refuseOptions: [
{
value: 1,
label: '不符合全日制学历要求',
},
{
value: 2,
label: '请上传事业单位工资变动审批表',
},
{
value: 3,
label: '请上传有单位盖章的承诺书',
},
{
value: 4,
label: '您不属于人才码申报范围',
},
{
value: 5,
label: '请上传海外境外学历认证书',
},
{
value: 6,
label: '不符合人才码事业单位专业技术岗和企业全职人员的申报单位要求',
},
{
value: 7,
label: '请上传有单位盖章、本人签字的承诺书',
},
],
// 居住地址
options: [],
// 状态吗
options1: [],
branchCode: '', // 管理后台给的code
code: '',
userName: '',
searchForm: {
name: '', // 姓名
phone: '', // 联系方式
areaCode: '', // 居住地址
stateCode: '', // 状态
},
loading: false,
// 状态
stateList: [
{
state: '',
stateName: '全部',
color: '',
},
{
state: 1,
stateName: '待审核',
type: 'warning',
},
{
state: 2,
stateName: '公示中',
type: 'warning',
},
{
state: 3,
stateName: '已发码',
type: 'success',
},
// {
// state: 4,
// stateName: "公示暂停",
// type: "info",
// },
// {
// state: 5,
// stateName: "审核拒绝",
// type: "warning",
// },
{
state: 6,
stateName: '已撤销',
type: 'danger',
},
{
state: 5,
stateName: '已拒绝',
type: 'danger',
},
],
// 责任部门
branchList: [],
// 认定类型
typeList: [],
// 人才类型
talentsList: [
{
id: '',
label: '全部',
},
{
id: '1',
label: '乡土或创新人才',
},
{
id: '2',
label: '学历人才',
},
{
id: '3',
label: '技能人才',
},
{
id: '4',
label: '专技人才',
},
],
tableData: [],
tableColumns: [
{
key: 'area',
label: '居住地址',
width: 250,
},
{
key: 'familyCode',
label: '家庭码',
width: 250,
},
{
key: 'haveChildren',
label: '是否有孩子',
width: 250,
},
{
key: 'idCard',
label: '证件',
width: 250,
},
{
key: 'marriageState',
label: '婚姻状况',
width: 250,
},
{
key: 'name',
label: '姓名',
width: 250,
},
{
key: 'phone',
label: '手机号',
width: 250,
},
{
key: 'state',
label: '状态描述',
width: 250,
},
{
key: 'workUnit',
label: '工作单位',
width: 250,
},
],
pagination: {
total: 0,
pageSize: 10,
currentPage: 1,
},
viewShow: false,
viewDetail: {},
record: [],
recordShow: false,
showEdu: false,
eduList: [],
// 查看对话框当前row
viewRow: {},
flag: 0,
};
},
watch: {
$route() {
// if (this.$route) {
// this.userName = localStorage.getItem('userName');
// this.branchCode = this.$route.query.branchCode
// ? this.$route.query.branchCode
// : '';
// this.code = this.$route.query.code ? this.$route.query.code : '';
// this.searchForm.name = '';
// this.searchForm.phone = '';
// this.searchForm.typeCode = '';
// this.searchForm.state = '';
// this.searchForm.recordName = '';
// this.searchForm.unitName = '';
// this.init();
// this.initType();
// if (!this.branchCode) {
// this.initBranch();
// }
// }
// },
},
},
methods: {
switechBranch(branchCode) {
switch (branchCode) {
case '5':
return '镇江市区';
case '17':
return '丹阳市';
case '18':
return '句容市';
case '19':
return '扬中市';
}
},
init() {
this.tableData = [];
this.loading = true;
let params = {
areaCode: this.searchForm.areaCode,
name: this.searchForm.name,
phone: this.searchForm.phone,
stateCode: this.searchForm.stateCode,
pageNum: this.pagination.currentPage,
pageSize: this.pagination.pageSize,
};
getList(params).then((res) => {
this.loading = false;
if (res.success) {
console.log(res);
this.pagination.total = res.data.total;
if (res.data.total) {
this.tableData = res.data.list;
} else {
this.tableData = [];
}
}
});
},
initType() {
getType().then((res) => {
this.options = res.data.map((item) => {
return {
label: item.name,
value: item.code,
};
});
});
},
initType1() {
getType1().then((res) => {
console.log(res);
this.options1 = res.data.map((item) => {
return {
label: item.state,
value: item.code,
};
});
});
},
initBranch() {
this.branchList = [
{
branchCode: '',
branchName: '全部',
},
];
getBranch({}).then((res) => {
this.branchList = this.branchList.concat(res.data);
console.log('this.branchList----', this.branchList);
});
},
jumpPage() {
this.init();
},
onSubmit() {
this.pagination.currentPage = 1;
this.init();
},
view(row) {
let params = {
code: row.familyCode,
};
get(params).then((res) => {
this.viewDetail = res.data;
this.viewRow = row;
this.viewShow = true;
});
},
getRecord(row) {
let params = {
code: row.familyCode,
};
getRecord(params).then((res) => {
this.record = res.data.data.data;
this.recordShow = true;
});
},
print(talentCode, row) {
// console.log("row---", row);
get({ talentCode }).then((res) => {
// console.log(res);
let arr = res.data;
arr.nation = arr.nation ? arr.nation : '';
arr.politicalFace = arr.politicalFace ? arr.politicalFace : '';
arr.major = arr.major ? arr.major : '';
// arr.highestDegree = arr.highestDegree ? arr.highestDegree : "";
arr.awardingUnit = arr.awardingUnit ? arr.awardingUnit : '';
arr.timeGrant = arr.timeGrant ? arr.timeGrant : '';
arr.unitTypeName = arr.unitType === '1' ? '企业' : '事业单位(专技人员)';
arr.sexName = arr.sex === 0 ? '男' : '女';
arr.adoptTime = row.state === 3 ? arr.adoptTime : '';
arr.promiseDes = arr.promise ? '已上传' : '未上传';
arr.pictureDes = arr.pictureList.length > 0 ? '已上传' : '未上传';
arr.educationDes = arr.education ? '已验证' : '未上传';
arr.studentStatusDes = arr.studentStatus ? '已验证' : '未上传';
let docxsrc = './static/talents.docx'; //模板文件的位置
let docxname = '人才码审核表'; //导出文件的名字
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent(docxsrc, function (error, content) {
// docxsrc是模板。我们在导出的时候，会根据此模板来导出对应的数据
// 抛出异常
if (error) {
throw error;
}
// 创建一个PizZip实例，内容为模板的内容
// console.log(content);
// console.log(error);
let zip = new PizZip(content);
// 创建并加载docx templater实例对象
let doc = new docxtemplater().loadZip(zip);
// 设置模板变量的值
doc.setData({
...arr, // e中的数据可以再模板中直接使用
});
try {
// 用模板变量的值替换所有模板变量
doc.render();
} catch (error) {
// 抛出异常
let e = {
message: error.message,
name: error.name,
stack: error.stack,
properties: error.properties,
};
console.log(
JSON.stringify({
error: e,
})
);
throw error;
}
// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
let out = doc.getZip().generate({
type: 'blob',
mimeType:
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
});
// 将目标文件对象保存为目标类型的文件，并命名
saveAs(out, docxname);
});
});
},
pass() {
this.flag = 1;
this.refuseDialog = true;
// this.refuseCode = row;
// if (this.viewDetail.educationState === 0) {
// this.$message.error('学历验证未通过，请先通过学历验证！');
// return;
// }
// this.flag = 1;
// this.$confirm('确定通过该人才的申请吗?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning',
// })
// .then(() => {
// let params = {
// talentCode: row.talentCode,
// userName: this.userName,
// state: 2,
// };
// updateState(params).then((res) => {
// console.log(res);
// Message.success('审核通过');
// this.viewShow = false;
// this.init();
// });
// })
// .catch(() => {
// // console.log("取消审核");
// });
},
passEducation() {
if (this.viewDetail.educationState !== 0) return;
educationState({
educationState: 1,
talentCode: this.viewDetail.talentCode,
}).then((res) => {
// console.log("审核按钮res-----", res);
if (res.success) {
this.viewDetail.educationState = 1;
this.init();
} else {
this.$message.error(res.msg);
}
});
},
viewEdu() {
educationQuery({
idCard: this.viewDetail.idCard,
name: this.viewDetail.name,
}).then((res) => {
if (res.success) {
if (res.data.data && res.data.data.length > 0) {
this.showEdu = true;
this.eduList = res.data.data;
} else {
this.$message.error(res.data.msg);
}
} else {
this.$message.error(res.msg);
}
});
},
refuseSelect(val) {
// console.log("--------", val);
this.refuseTextarea = val
? this.refuseOptions.find((ele) => ele.value === val).label
: '';
},
// 拒绝对话框
deny(talentCode) {
this.flag = 0;
this.refuseDialog = true;
this.refuseCode = talentCode;
},
cancelBtn() {
this.refuseTextarea = null;
this.refuseValue = '';
this.refuseDialog = false;
},
successBtn() {
if (this.refuseTextarea === null || this.refuseTextarea == '') {
this.$message.error('未输入拒绝原因');
} else {
// console.log("this.refuseTextarea----", this.refuseTextarea);
// console.log("this.refuseCode----", this.refuseCode);
let params = {
talentCode: this.refuseCode.talentCode,
userName: this.userName,
state: 5,
reason: this.refuseTextarea,
};
updateState(params).then((res) => {
console.log('res---', res);
Message.success('审核拒绝');
this.viewShow = false;
this.init();
});
this.refuseDialog = false;
}
},
// deny(talentCode) {
// console.log('talentCode----',talentCode);
// this.$prompt("确定拒绝该人才的申请吗?确定的话，请输入拒绝原因。", "提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// inputPlaceholder: "请输入拒绝原因",
// inputType: "textarea",
// })
// .then(({ value }) => {
// if (!value) {
// this.$message.error("未输入拒绝原因");
// } else {
// let params = {
// talentCode,
// userName: this.userName,
// state: 5,
// reason: value,
// };
// updateState(params).then((res) => {
// console.log(res);
// Message.success("审核拒绝");
// this.init();
// });
// }
// })
// .catch(() => {
// console.log("取消");
// });
// },
pause(talentCode) {
this.$confirm('确定暂停该人才的公示吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
let params = {
talentCode,
userName: this.userName,
state: 4,
};
updateState(params).then((res) => {
console.log(res);
Message.success('暂停成功');
this.init();
});
})
.catch(() => {
// console.log("取消暂停");
});
},
recover(talentCode) {
this.$confirm('确定恢复该人才的公示吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
let params = {
talentCode,
userName: this.userName,
state: 2,
};
updateState(params).then((res) => {
console.log(res);
Message.success('恢复成功');
this.init();
});
})
.catch(() => {
// console.log("取消恢复");
});
},
blacklist(talentCode) {
this.$prompt(
'确定撤销该申请吗?此操作后去需要重亲提交申请！确定的话，请输入原因。',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPlaceholder: '请输入原因',
inputType: 'textarea',
}
)
.then(({ value }) => {
if (!value) {
this.$message.error('未输入拒绝原因');
} else {
let params = {
talentCode,
userName: this.userName,
state: 6,
reason: value,
};
updateState(params).then((res) => {
console.log(res);
Message.success('撤销成功');
this.init();
});
}
})
.catch(() => {
// console.log("取消");
});
},
getSatusArr(state) {
return stateArr.filter((item) => {
return item.state === state;
})[0];
},
},
created() {
this.userName = localStorage.getItem('userName');
this.branchCode = this.$route.query.branchCode
? this.$route.query.branchCode
: '';
this.code = this.$route.query.code ? this.$route.query.code : '';
this.init();
this.initType();
this.initType1();
// if (!this.branchCode) {
// this.initBranch();
// }
},
};
</script>
<style lang="stylus" scoped>
@import '~@/stylus/common';
.table-wrapper1{
margin-top: 20px;
padding: 15px;
background: #fff;
border-radius: 5px;
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.05);
max-height: calc(100vh - 320px);
overflow: auto;
}
.el-form-item {
margin-right:5px
}
.early, .warning {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-block;
}
.early {
background: #FFD700;
}
.warning {
background: red;
}
.content {
max-height: 60vh;
overflow-y: auto;
.cell {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
.label {
width: 150px;
color: #999;
text-align: left;
span {
color: red;
font-size: 12px;
}
}
.value {
color: #000;
text-align: left;
}
.info {
.item {
width: 100%;
text-align: left;
color: #000;
margin-bottom: 10px;
}
.item:last-child {
margin-bottom: 0;
}
}
}
}
.refuseDialog {
/deep/.el-select {
width: 100%;
margin: 20px 0;
}
/deep/textarea {
height: 100px !important;
}
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
background-color: #a1a3a9;
border-radius: 2px;
}
</style>
src/views/Login/index.vue
......@@ -4,25 +4,45 @@
<span class="title">欢迎来到镇江管理后台</span>
<el-form class="form" :model="form" :rules="rules" ref="form">
<el-form-item label="账号" prop="account">
<el-input size="large" v-model="form.account" style="width: 80%" suffix-icon="el-icon-user">
<el-input
size="large"
v-model="form.account"
style="width: 80%"
suffix-icon="el-icon-user"
>
</el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" size="large" style="width: 80%" show-password></el-input>
<el-input
v-model="form.password"
size="large"
style="width: 80%"
show-password
></el-input>
</el-form-item>
<el-form-item label="验证码" prop="verification">
<div style="display: flex;">
<el-input v-model="form.verification" size="large" style="width: 54%"></el-input>
<div style="display: flex">
<el-input
v-model="form.verification"
size="large"
style="width: 54%"
></el-input>
<template>
<span @click="refreshCode" style="cursor: pointer;">
<span @click="refreshCode" style="cursor: pointer">
<Identify :identifyCode="identifyCode"></Identify>
</span>
</template>
</div>
</el-form-item>
<el-form-item class="fotter">
<el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading" @click="login" size="large">
登录</el-button>
<el-button
type="primary"
v-loading.fullscreen.lock="fullscreenLoading"
@click="login"
size="large"
>
登录</el-button
>
</el-form-item>
</el-form>
</div>
......@@ -30,10 +50,10 @@
</template>
<script>
import { setToken, setMenuList } from "@/utils/auth.js";
import Identify from "./identify";
import { setToken, setMenuList } from '@/utils/auth.js';
import Identify from './identify';
// import md5 from "js-md5";
import { login, listMenus } from "@/api/login";
import { login, listMenus } from '@/api/login';
export default {
components: {
Identify,
......@@ -41,47 +61,52 @@ export default {
data() {
return {
form: {
account: "",
password: "",
verification: "",
account: '',
password: '',
verification: '',
},
rules: {
account: [{ required: true, message: "请输入账号", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
verification: [{ required: true, message: "请输入验证码", trigger: "blur" }],
account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
verification: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
],
},
// 图片验证码
identifyCode: '',
// 验证码规则
identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY',
fullscreenLoading: false
fullscreenLoading: false,
};
},
mounted() {
window.addEventListener("keydown", this.keyDown);
this.refreshCode()
},
created() {
window.addEventListener('keydown', this.keyDown);
this.refreshCode();
},
created() {},
methods: {
// 切换验证码
refreshCode() {
this.identifyCode = ''
this.makeCode(this.identifyCodes, 4)
this.identifyCode = '';
this.makeCode(this.identifyCodes, 4);
},
// 生成随机验证码
makeCode(o, l) {
for (let i = 0; i < l; i++) {
this.identifyCode += this.identifyCodes[
this.identifyCode +=
this.identifyCodes[
Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)
]
];
}
},
login() {
//测试账号 username：admin password：Admin@#!2022
this.$refs.form.validate((valid) => {
if (valid) {
if (this.form.verification.toLowerCase() === this.identifyCode.toLowerCase()) {
if (
this.form.verification.toLowerCase() ===
this.identifyCode.toLowerCase()
) {
this.fullscreenLoading = true;
// let password = md5(this.form.password);
let data = {
......@@ -95,28 +120,26 @@ export default {
localStorage.setItem('userName', res.data.userName),
listMenus({ tokenValue: res.data.tokenValue }).then((res) => {
if (res.success == true) {
console.log(res)
console.log(res);
setMenuList(JSON.stringify(res.data));
this.$router.push({ path: "/home" });
this.$message.success("登陆成功~");
this.$router.push({ path: '/home' });
this.$message.success('登陆成功~');
} else {
this.$message.error(res.msg || "登陆失败！");
this.refreshCode()
this.$message.error(res.msg || '登陆失败！');
this.refreshCode();
}
})
});
} else {
this.$message.error(res.msg || "登陆失败！");
this.refreshCode()
this.$message.error(res.msg || '登陆失败！');
this.refreshCode();
}
});
} else {
this.$message.error("请输入正确的验证码！");
this.refreshCode()
this.$message.error('请输入正确的验证码！');
this.refreshCode();
}
}
else {
this.refreshCode()
} else {
this.refreshCode();
return false;
}
});
......@@ -129,7 +152,7 @@ export default {
},
},
destroyed() {
window.removeEventListener("keydown", this.keyDown, false);
window.removeEventListener('keydown', this.keyDown, false);
},
};
</script>
......
yarn.lock
This source diff could not be displayed because it is too large. You can view the blob instead.
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