mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2026-01-03 12:05:28 +08:00
JeecgBoot低代码平台 3.0版本发布—新里程牌开始，迎接VUE3版本到来！！
This commit is contained in:
zhangdaiscott
@ -14,6 +14,7 @@
|
||||
|
||||
<script>
|
||||
import { JVXETypes } from '@/components/jeecg/JVxeTable'
|
||||
import { getAction } from '@api/manage'
|
||||
|
||||
export default {
|
||||
name: 'JVxeDemo2',
|
||||
@ -23,7 +24,7 @@ export default {
|
||||
linkageConfig: [
|
||||
{requestData: this.requestData, key: 's1'},
|
||||
// 可配置多个联动
|
||||
{requestData: this.loadData, key: 'level1',},
|
||||
{requestData: this.loadMenu, key: 'menu1',},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
@ -61,34 +62,34 @@ export default {
|
||||
placeholder: '请选择${title}',
|
||||
},
|
||||
{
|
||||
title: '一级',
|
||||
key: 'level1',
|
||||
title: '一级菜单',
|
||||
key: 'menu1',
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
placeholder: '请选择${title}',
|
||||
// 联动字段（即下一级的字段）
|
||||
linkageKey: 'level2',
|
||||
linkageKey: 'menu2',
|
||||
},
|
||||
{
|
||||
title: '二级',
|
||||
key: 'level2',
|
||||
title: '二级菜单',
|
||||
key: 'menu2',
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
placeholder: '请选择${title}',
|
||||
// 联动字段（即下一级的字段）
|
||||
linkageKey: 'level3',
|
||||
linkageKey: 'menu3',
|
||||
},
|
||||
{
|
||||
title: '三级',
|
||||
key: 'level3',
|
||||
title: '三级菜单',
|
||||
key: 'menu3',
|
||||
type: JVXETypes.select,
|
||||
width: '180px',
|
||||
placeholder: '请选择${title}',
|
||||
}
|
||||
],
|
||||
dataSource: [
|
||||
{sex: '1', s1: '110000', s2: '110100', s3: '110101', level1: '1', level2: '3', level3: '7'},
|
||||
{sex: '2', s1: '130000', s2: '130300', s3: '130303', level1: '2', level2: '6', level3: '14'},
|
||||
{sex: '1', s1: '110000', s2: '110100', s3: '110101'},
|
||||
{sex: '2', s1: '130000', s2: '130300', s3: '130303'},
|
||||
],
|
||||
// 模拟数据
|
||||
mockData: [
|
||||
@ -123,24 +124,6 @@ export default {
|
||||
{text: '山海关区', value: '130303', parent: '130300'},
|
||||
{text: '北戴河区', value: '130304', parent: '130300'},
|
||||
],
|
||||
mockData1: [
|
||||
{id: '1', name: '图书馆', parentId: '0'},
|
||||
{id: '2', name: '电影院', parentId: '0'},
|
||||
|
||||
{id: '3', name: '一楼', parentId: '1'},
|
||||
{id: '4', name: '二楼', parentId: '1'},
|
||||
{id: '5', name: '中影星美', parentId: '2'},
|
||||
{id: '6', name: '万达国际', parentId: '2'},
|
||||
|
||||
{id: '7', name: '技术图书', parentId: '3'},
|
||||
{id: '8', name: '财务图书', parentId: '3'},
|
||||
{id: '9', name: '儿童图书', parentId: '4'},
|
||||
{id: '10', name: '励志图书', parentId: '4'},
|
||||
{id: '11', name: '1号厅', parentId: '5'},
|
||||
{id: '12', name: '2号厅', parentId: '5'},
|
||||
{id: '13', name: 'I-MAX厅', parentId: '6'},
|
||||
{id: '14', name: '3D厅', parentId: '6'},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -156,23 +139,22 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
// 模拟加载数据，模拟数据格式不同的情况下如何组装数据
|
||||
async loadData(parent) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let parentId = parent === '' ? '0' : parent
|
||||
let data = this.mockData1.filter(i => i.parentId === parentId)
|
||||
data = data.map(item => {
|
||||
return {
|
||||
// 必须包含以下两个字段
|
||||
value: item.id,
|
||||
text: item.name,
|
||||
}
|
||||
})
|
||||
setTimeout(() => {
|
||||
resolve(data)
|
||||
}, 500)
|
||||
})
|
||||
async loadMenu(parent) {
|
||||
let res
|
||||
// 如果parent为空，则查询第一级菜单
|
||||
if (parent === '') {
|
||||
res = await getAction('/sys/permission/getSystemMenuList')
|
||||
} else {
|
||||
res = await getAction('/sys/permission/getSystemSubmenu', {parentId: parent})
|
||||
}
|
||||
if (res.success) {
|
||||
// 返回的数据里必须包含 value 和 text 字段
|
||||
return res.result.map(item => ({value: item.id, text: item.name}))
|
||||
}
|
||||
this.$message.warning('loadMenu失败：' + res.message)
|
||||
return []
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -268,6 +268,7 @@
|
||||
placeholder="请选择菜单"
|
||||
dict="sys_permission,name,id"
|
||||
pidField="parent_id"
|
||||
hasChildField="is_leaf"
|
||||
pidValue=""
|
||||
/>
|
||||
</a-form-model-item>
|
||||
@ -283,6 +284,7 @@
|
||||
placeholder="请选择菜单"
|
||||
dict="sys_permission,name,id"
|
||||
pidField="parent_id"
|
||||
hasChildField="is_leaf"
|
||||
pidValue=""
|
||||
multiple
|
||||
/>
|
||||
|
||||
@ -156,10 +156,6 @@
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" @click="handleAgentSettings(record.username)">代理人</a>
|
||||
</a-menu-item>
|
||||
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
@ -378,10 +374,6 @@
|
||||
handleChangePassword(username) {
|
||||
this.$refs.passwordmodal.show(username);
|
||||
},
|
||||
handleAgentSettings(username){
|
||||
this.$refs.sysUserAgentModal.agentSettings(username);
|
||||
this.$refs.sysUserAgentModal.title = "用户代理人设置";
|
||||
},
|
||||
passwordModalOk() {
|
||||
//TODO 密码修改完成 不需要刷新页面，可以把datasource中的数据更新一下
|
||||
},
|
||||
|
||||
@ -1,183 +0,0 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
|
||||
<a-form style="max-width: 500px; margin: 40px auto 0;" :form="form" @keyup.enter.native="nextStep">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
v-decorator="['username',validatorRules.username]"
|
||||
size="large"
|
||||
type="text"
|
||||
autocomplete="false"
|
||||
placeholder="请输入用户账号或手机号">
|
||||
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-row :gutter="0">
|
||||
<a-col :span="14">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
v-decorator="['inputCode',validatorRules.inputCode]"
|
||||
size="large"
|
||||
type="text"
|
||||
@change="inputCodeChange"
|
||||
placeholder="请输入验证码">
|
||||
<a-icon slot="prefix" v-if=" inputCodeContent==verifiedCode " type="smile"
|
||||
:style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
<a-icon slot="prefix" v-else type="frown" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="10" style="text-align: right">
|
||||
<img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/>
|
||||
<img v-else style="margin-top: 2px;" src="../../../assets/checkcode.png" @click="handleChangeCheckCode"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item :wrapperCol="{span: 19, offset: 5}">
|
||||
<router-link style="float: left;line-height: 40px;" :to="{ name: 'login' }">使用已有账户登录</router-link>
|
||||
<a-button type="primary" @click="nextStep">下一步</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction,postAction } from '@/api/manage'
|
||||
import { checkOnlyUser } from '@/api/api'
|
||||
|
||||
export default {
|
||||
name: "Step1",
|
||||
data() {
|
||||
return {
|
||||
form: this.$form.createForm(this),
|
||||
inputCodeContent: "",
|
||||
inputCodeNull: true,
|
||||
verifiedCode: "",
|
||||
validatorRules: {
|
||||
username: {rules: [{required: false}, {validator: this.validateInputUsername}]},
|
||||
inputCode: {rules: [{required: true, message: '请输入验证码!'}]},
|
||||
},
|
||||
randCodeImage:'',
|
||||
requestCodeSuccess:true,
|
||||
currdatetime:''
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.handleChangeCheckCode();
|
||||
},
|
||||
methods: {
|
||||
handleChangeCheckCode(){
|
||||
this.currdatetime = new Date().getTime();
|
||||
getAction(`/sys/randomImage/${this.currdatetime}`).then(res=>{
|
||||
if(res.success){
|
||||
this.randCodeImage = res.result
|
||||
this.requestCodeSuccess=true
|
||||
}else{
|
||||
this.$message.error(res.message)
|
||||
this.requestCodeSuccess=false
|
||||
}
|
||||
}).catch(()=>{
|
||||
this.requestCodeSuccess=false
|
||||
})
|
||||
},
|
||||
nextStep() {
|
||||
let that = this
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
let isPhone = false;
|
||||
var params = {}
|
||||
var reg = /^[1-9]\d*$|^0$/;
|
||||
var username = values.username;
|
||||
if (reg.test(username) == true) {
|
||||
params.phone = username;
|
||||
isPhone = true
|
||||
} else {
|
||||
params.username = username;
|
||||
}
|
||||
that.validateInputCode().then(()=>{
|
||||
getAction("/sys/user/querySysUser", params).then((res) => {
|
||||
if (res.success) {
|
||||
var userList = {
|
||||
username: res.result.username,
|
||||
phone: res.result.phone,
|
||||
isPhone: isPhone
|
||||
};
|
||||
setTimeout(function () {
|
||||
that.$emit('nextStep', userList)
|
||||
})
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
validateInputCode() {
|
||||
return new Promise((resolve,reject)=>{
|
||||
postAction("/sys/checkCaptcha",{
|
||||
captcha:this.inputCodeContent,
|
||||
checkKey:this.currdatetime
|
||||
}).then(res=>{
|
||||
if(res.success){
|
||||
resolve();
|
||||
}else{
|
||||
this.$message.error(res.message)
|
||||
reject();
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
inputCodeChange(e) {
|
||||
this.inputCodeContent = e.target.value;
|
||||
console.log(this.inputCodeContent)
|
||||
if (!e.target.value || 0 == e.target.value) {
|
||||
this.inputCodeNull = true
|
||||
} else {
|
||||
this.inputCodeContent = this.inputCodeContent.toLowerCase()
|
||||
this.inputCodeNull = false
|
||||
}
|
||||
},
|
||||
generateCode(value) {
|
||||
this.verifiedCode = value.toLowerCase();
|
||||
console.log(this.verifiedCode);
|
||||
},
|
||||
validateInputUsername(rule, value, callback) {
|
||||
console.log(value);
|
||||
var reg = /^[0-9]+.?[0-9]*/;
|
||||
if (!value) {
|
||||
callback("请输入用户名和手机号！");
|
||||
}
|
||||
|
||||
//判断用户输入账号还是手机号码
|
||||
if (reg.test(value)) {
|
||||
var params = {
|
||||
phone: value,
|
||||
};
|
||||
checkOnlyUser(params).then((res) => {
|
||||
if (res.success) {
|
||||
callback("用户名不存在!")
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
var params = {
|
||||
username: value,
|
||||
};
|
||||
checkOnlyUser(params).then((res) => {
|
||||
if (res.success) {
|
||||
callback("用户名不存在!")
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user