超市前台
parent
4c18a3f47b
commit
e99cf499de
|
|
@ -0,0 +1,9 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function list(data) {
|
||||
return request({
|
||||
url: '/merch/list',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
|
@ -2,15 +2,39 @@ import request from '@/utils/request'
|
|||
|
||||
export function login(data) {
|
||||
return request({
|
||||
url: '/vue-admin-template/user/login',
|
||||
url: '/auth/login',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function sendCode(phone) {
|
||||
return request({
|
||||
url: '/auth/sendCode/' + phone,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
export function list(data) {
|
||||
return request({
|
||||
url: '/user/list',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function list2(data) {
|
||||
return request({
|
||||
url: '/user/list2',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function getInfo(token) {
|
||||
return request({
|
||||
url: '/vue-admin-template/user/info',
|
||||
url: '/auth/info',
|
||||
method: 'get',
|
||||
params: { token }
|
||||
})
|
||||
|
|
@ -18,7 +42,35 @@ export function getInfo(token) {
|
|||
|
||||
export function logout() {
|
||||
return request({
|
||||
url: '/vue-admin-template/user/logout',
|
||||
url: '/auth/logout',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function add(data) {
|
||||
return request({
|
||||
url: '/user/add',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
export function update(data) {
|
||||
return request({
|
||||
url: '/user/update',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
export function findById(userId) {
|
||||
return request({
|
||||
url: '/user/findById/' + userId,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
export function deleteId(userId) {
|
||||
return request({
|
||||
url: '/user/deleteId/' + userId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,6 +90,45 @@ export const constantRoutes = [
|
|||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/merch',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'merch',
|
||||
name: '销售管理',
|
||||
component: () => import('@/views/merch/index'),
|
||||
meta: { title: '销售管理', icon: 'merch' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/user',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'user',
|
||||
name: '员工管理',
|
||||
component: () => import('@/views/user/index'),
|
||||
meta: { title: '员工管理', icon: 'user' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/user2',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'user2',
|
||||
name: '管理员管理',
|
||||
component: () => import('@/views/user2/index'),
|
||||
meta: { title: '管理员管理', icon: 'user2' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/nested',
|
||||
component: Layout,
|
||||
|
|
|
|||
|
|
@ -30,9 +30,9 @@ const mutations = {
|
|||
const actions = {
|
||||
// user login
|
||||
login({ commit }, userInfo) {
|
||||
const { username, password } = userInfo
|
||||
const { phone,userPwd, code } = userInfo
|
||||
return new Promise((resolve, reject) => {
|
||||
login({ username: username.trim(), password: password }).then(response => {
|
||||
login({ phone: phone.trim(),userPwd:userPwd, code: code }).then(response => {
|
||||
const { data } = response
|
||||
commit('SET_TOKEN', data.token)
|
||||
setToken(data.token)
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { getToken } from '@/utils/auth'
|
|||
const service = axios.create({
|
||||
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
|
||||
// withCredentials: true, // send cookies when cross-domain requests
|
||||
timeout: 5000 // request timeout
|
||||
timeout: 50000 // request timeout
|
||||
})
|
||||
|
||||
// request interceptor
|
||||
|
|
@ -19,7 +19,7 @@ service.interceptors.request.use(
|
|||
// let each request carry token
|
||||
// ['X-Token'] is a custom headers key
|
||||
// please modify it according to the actual situation
|
||||
config.headers['X-Token'] = getToken()
|
||||
config.headers['token'] = getToken()
|
||||
}
|
||||
return config
|
||||
},
|
||||
|
|
@ -46,9 +46,9 @@ service.interceptors.response.use(
|
|||
const res = response.data
|
||||
|
||||
// if the custom code is not 20000, it is judged as an error.
|
||||
if (res.code !== 20000) {
|
||||
if (res.code !== 200) {
|
||||
Message({
|
||||
message: res.message || 'Error',
|
||||
message: res.msg || 'Error',
|
||||
type: 'error',
|
||||
duration: 5 * 1000
|
||||
})
|
||||
|
|
@ -66,7 +66,7 @@ service.interceptors.response.use(
|
|||
})
|
||||
})
|
||||
}
|
||||
return Promise.reject(new Error(res.message || 'Error'))
|
||||
return Promise.reject(new Error(res.msg || 'Error'))
|
||||
} else {
|
||||
return res
|
||||
}
|
||||
|
|
@ -74,7 +74,7 @@ service.interceptors.response.use(
|
|||
error => {
|
||||
console.log('err' + error) // for debug
|
||||
Message({
|
||||
message: error.message,
|
||||
message: error.msg,
|
||||
type: 'error',
|
||||
duration: 5 * 1000
|
||||
})
|
||||
|
|
|
|||
|
|
@ -6,32 +6,47 @@
|
|||
<h3 class="title">Login Form</h3>
|
||||
</div>
|
||||
|
||||
<el-form-item prop="username">
|
||||
<el-form-item prop="phone">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="user" />
|
||||
<svg-icon icon-class="phone" />
|
||||
</span>
|
||||
<el-input
|
||||
ref="username"
|
||||
v-model="loginForm.username"
|
||||
placeholder="Username"
|
||||
name="username"
|
||||
ref="phone"
|
||||
v-model="loginForm.phone"
|
||||
placeholder="phone"
|
||||
name="phone"
|
||||
type="text"
|
||||
tabindex="1"
|
||||
auto-complete="on"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<el-form-item prop="userPwd">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
<svg-icon icon-class="userPwd" />
|
||||
</span>
|
||||
<el-input
|
||||
ref="userPwd"
|
||||
v-model="loginForm.userPwd"
|
||||
placeholder="userPwd"
|
||||
name="userPwd"
|
||||
type="text"
|
||||
tabindex="1"
|
||||
auto-complete="on"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="code">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="code" />
|
||||
</span>
|
||||
<el-input
|
||||
:key="passwordType"
|
||||
ref="password"
|
||||
v-model="loginForm.password"
|
||||
ref="code"
|
||||
v-model="loginForm.code"
|
||||
:type="passwordType"
|
||||
placeholder="Password"
|
||||
name="password"
|
||||
placeholder="code"
|
||||
name="code"
|
||||
tabindex="2"
|
||||
auto-complete="on"
|
||||
@keyup.enter.native="handleLogin"
|
||||
|
|
@ -41,6 +56,7 @@
|
|||
</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="sendCode">获取验证码</el-button>
|
||||
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
|
||||
|
||||
<div class="tips">
|
||||
|
|
@ -53,185 +69,178 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { validUsername } from '@/utils/validate'
|
||||
import {sendCode} from '@/api/user'
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (!validUsername(value)) {
|
||||
callback(new Error('Please enter the correct user name'))
|
||||
} else {
|
||||
callback()
|
||||
export default {
|
||||
name: 'Login',
|
||||
data() {
|
||||
return {
|
||||
loginForm: {
|
||||
phone: '13761676189',
|
||||
userPwd:'Xf031210$',
|
||||
code: '1234'
|
||||
},
|
||||
loginRules: {
|
||||
phone: [{ required: true, trigger: 'blur' }],
|
||||
userPwd: [{ required: true, trigger: 'blur' }],
|
||||
code: [{ required: true, trigger: 'blur' }]
|
||||
},
|
||||
loading: false,
|
||||
passwordType: 'password',
|
||||
redirect: undefined
|
||||
}
|
||||
}
|
||||
const validatePassword = (rule, value, callback) => {
|
||||
if (value.length < 6) {
|
||||
callback(new Error('The password can not be less than 6 digits'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
loginForm: {
|
||||
username: 'admin',
|
||||
password: '111111'
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
|
||||
},
|
||||
loading: false,
|
||||
passwordType: 'password',
|
||||
redirect: undefined
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function(route) {
|
||||
this.redirect = route.query && route.query.redirect
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPwd() {
|
||||
if (this.passwordType === 'password') {
|
||||
this.passwordType = ''
|
||||
} else {
|
||||
this.passwordType = 'password'
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.$refs.password.focus()
|
||||
})
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.$store.dispatch('user/login', this.loginForm).then(() => {
|
||||
this.$router.push({ path: this.redirect || '/' })
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function(route) {
|
||||
this.redirect = route.query && route.query.redirect
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sendCode(){
|
||||
sendCode(this.loginForm.phone).then(res=>{
|
||||
this.$message.success('发送成功')
|
||||
})
|
||||
},
|
||||
showPwd() {
|
||||
if (this.passwordType === 'password') {
|
||||
this.passwordType = ''
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
this.passwordType = 'password'
|
||||
}
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
this.$refs.password.focus()
|
||||
})
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.$store.dispatch('user/login', this.loginForm).then(() => {
|
||||
this.$router.push({ path: this.redirect || '/' })
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* 修复input 背景不协调 和光标变色 */
|
||||
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
||||
/* 修复input 背景不协调 和光标变色 */
|
||||
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
||||
|
||||
$bg:#283443;
|
||||
$light_gray:#fff;
|
||||
$cursor: #fff;
|
||||
$bg:#283443;
|
||||
$light_gray:#fff;
|
||||
$cursor: #fff;
|
||||
|
||||
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
||||
.login-container .el-input input {
|
||||
color: $cursor;
|
||||
}
|
||||
}
|
||||
|
||||
/* reset element-ui css */
|
||||
.login-container {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 47px;
|
||||
width: 85%;
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 12px 5px 12px 15px;
|
||||
color: $light_gray;
|
||||
height: 47px;
|
||||
caret-color: $cursor;
|
||||
|
||||
&:-webkit-autofill {
|
||||
box-shadow: 0 0 0px 1000px $bg inset !important;
|
||||
-webkit-text-fill-color: $cursor !important;
|
||||
}
|
||||
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
||||
.login-container .el-input input {
|
||||
color: $cursor;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
/* reset element-ui css */
|
||||
.login-container {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 47px;
|
||||
width: 85%;
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 12px 5px 12px 15px;
|
||||
color: $light_gray;
|
||||
height: 47px;
|
||||
caret-color: $cursor;
|
||||
|
||||
&:-webkit-autofill {
|
||||
box-shadow: 0 0 0px 1000px $bg inset !important;
|
||||
-webkit-text-fill-color: $cursor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$bg:#2d3a4b;
|
||||
$dark_gray:#889aa4;
|
||||
$light_gray:#eee;
|
||||
$bg:#2d3a4b;
|
||||
$dark_gray:#889aa4;
|
||||
$light_gray:#eee;
|
||||
|
||||
.login-container {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
background-color: $bg;
|
||||
overflow: hidden;
|
||||
|
||||
.login-form {
|
||||
position: relative;
|
||||
width: 520px;
|
||||
max-width: 100%;
|
||||
padding: 160px 35px 0;
|
||||
margin: 0 auto;
|
||||
.login-container {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
background-color: $bg;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
.login-form {
|
||||
position: relative;
|
||||
width: 520px;
|
||||
max-width: 100%;
|
||||
padding: 160px 35px 0;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
span {
|
||||
&:first-of-type {
|
||||
margin-right: 16px;
|
||||
.tips {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
|
||||
span {
|
||||
&:first-of-type {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
padding: 6px 5px 6px 15px;
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
}
|
||||
.svg-container {
|
||||
padding: 6px 5px 6px 15px;
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
position: relative;
|
||||
.title-container {
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-size: 26px;
|
||||
color: $light_gray;
|
||||
margin: 0px auto 40px auto;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
.title {
|
||||
font-size: 26px;
|
||||
color: $light_gray;
|
||||
margin: 0px auto 40px auto;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="merchRequest" label-width="80px">
|
||||
<el-form-item label="条形码">
|
||||
<el-input v-model="merchRequest.barCode"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数量">
|
||||
<el-input v-model="merchRequest.merchNum"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table :data="merchResponse.list" style="width: 100%">
|
||||
<el-table-column label="商品编号" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{scope.row.merchId}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="名称" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{scope.row.merchName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="条形码" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{scope.row.barCode}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数量" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{scope.row.merchNum}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单价" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{scope.row.salesProPrice}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="merchRequest.pageNum"
|
||||
:page-sizes="[1, 2, 3, 4]"
|
||||
:page-size="merchRequest.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="merchResponse.total">
|
||||
</el-pagination>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {list} from '@/api/merch'
|
||||
|
||||
export default {
|
||||
name: 'merch',
|
||||
data() {
|
||||
return {
|
||||
merchRequest:{
|
||||
barCode:'',
|
||||
merchNum:'',
|
||||
pageNum:1,
|
||||
pageSize:3
|
||||
},
|
||||
merchResponse:{
|
||||
total:0,
|
||||
list:[]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.onSubmit()
|
||||
},
|
||||
methods: {
|
||||
onSubmit(){
|
||||
list(this.merchRequest).then(res=>{
|
||||
this.merchResponse=res.data
|
||||
})
|
||||
},
|
||||
handleSizeChange(val){
|
||||
this.merchRequest.pageSize=val
|
||||
this.onSubmit()
|
||||
},
|
||||
handleCurrentChange(val){
|
||||
this.merchRequest.pageNum=val
|
||||
this.onSubmit()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,232 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="userRequest" label-width="80px">
|
||||
<el-form-item label="id">
|
||||
<el-input v-model="userRequest.userId"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-button type="primary" @click="add">添加</el-button>
|
||||
|
||||
<el-table :data="userResponse.list" style="width: 100%">
|
||||
<el-table-column label="用户编号" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userId}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户名字" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户类型" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="用户身份证" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userIdcard }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户年龄" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userAge }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户性别" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userGender }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户住址" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userAddress }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户职位" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userPosition }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户薪资" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userSal }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="手机号" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.phone }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="工作开始时间" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" @click="update(scope.row.userId)">编辑</el-button>
|
||||
<el-button size="mini" type="danger" @click="deleteId(scope.row.userId)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="userRequest.pageNum"
|
||||
:page-sizes="[1,2,3,4]"
|
||||
:page-size="userRequest.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="userResponse.total">
|
||||
</el-pagination>
|
||||
|
||||
<el-dialog :title="title" :visible.sync="dialogFormVisible">
|
||||
<el-form :model="User">
|
||||
<el-form-item label="用户名字" :label-width="formLabelWidth">
|
||||
<el-input v-model="User.userName" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户密码" :label-width="formLabelWidth">
|
||||
<el-input v-model="User.userPwd" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户类型" :label-width="formLabelWidth">
|
||||
<el-select v-model="User.userType" placeholder="请选择">
|
||||
<el-option label="销售员" value="1"></el-option>
|
||||
<el-option label="仓库管理员" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户身份证" :label-width="formLabelWidth">
|
||||
<el-input v-model="User.userIdcard" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户年龄" :label-width="formLabelWidth">
|
||||
<el-input v-model="User.userAge" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户性别" :label-width="formLabelWidth">
|
||||
<el-select v-model="User.userGender" placeholder="请选择">
|
||||
<el-option label="男" value="男"></el-option>
|
||||
<el-option label="女" value="女"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户住址" :label-width="formLabelWidth">
|
||||
<el-input v-model="User.userAddress" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户职位" :label-width="formLabelWidth">
|
||||
<el-select v-model="User.userPosition" placeholder="请选择">
|
||||
<el-option label="销售员" value="销售员"></el-option>
|
||||
<el-option label="仓库管理员" value="仓库管理员"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户薪资" :label-width="formLabelWidth">
|
||||
<el-input v-model="User.userSal" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" :label-width="formLabelWidth">
|
||||
<el-input v-model="User.phone" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="工作开始时间" :label-width="formLabelWidth">
|
||||
<el-input v-model="User.userDate" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="operAdd">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {list,add,update,findById,deleteId} from '@/api/user'
|
||||
|
||||
export default {
|
||||
name: 'User',
|
||||
data() {
|
||||
return {
|
||||
userRequest:{
|
||||
userId:'',
|
||||
pageNum:1,
|
||||
pageSize:3
|
||||
},
|
||||
userResponse:{
|
||||
total:0,
|
||||
list:[]
|
||||
},
|
||||
dialogFormVisible:false,
|
||||
formLabelWidth:"120px",
|
||||
title:'表单',
|
||||
User:{}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.onSubmit()
|
||||
},
|
||||
methods: {
|
||||
deleteId(userId){
|
||||
deleteId(userId).then(res=>{
|
||||
alert("删除成功")
|
||||
this.onSubmit();
|
||||
})
|
||||
},
|
||||
add(){
|
||||
this.dialogFormVisible=true
|
||||
this.title='添加'
|
||||
this.User={}
|
||||
},
|
||||
update(userId){
|
||||
findById(userId).then(res=>{
|
||||
this.dialogFormVisible=true
|
||||
this.title='修改'
|
||||
this.User=res.data
|
||||
})
|
||||
},
|
||||
|
||||
operAdd(){
|
||||
if (this.User.userId){
|
||||
this.updateUser()
|
||||
}else{
|
||||
this.addUser()
|
||||
}
|
||||
},
|
||||
updateUser(){
|
||||
update(this.User).then(res=>{
|
||||
this.dialogFormVisible=false
|
||||
this.User={}
|
||||
this.title='修改成功'
|
||||
alert("修改成功")
|
||||
this.onSubmit()
|
||||
})
|
||||
},
|
||||
addUser(){
|
||||
add(this.User).then(res=>{
|
||||
this.dialogFormVisible=false
|
||||
alert("添加成功")
|
||||
this.title='添加成功'
|
||||
this.User={}
|
||||
this.onSubmit()
|
||||
})
|
||||
},
|
||||
onSubmit(){
|
||||
list(this.userRequest).then(res=>{
|
||||
this.userResponse=res.data
|
||||
})
|
||||
},
|
||||
|
||||
handleSizeChange(val){
|
||||
this.userRequest.pageSize=val
|
||||
this.onSubmit()
|
||||
},
|
||||
handleCurrentChange(val){
|
||||
this.userRequest.pageNum=val
|
||||
this.onSubmit()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,232 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :model="userRequest" label-width="80px">
|
||||
<el-form-item label="id">
|
||||
<el-input v-model="userRequest.userId"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-button type="primary" @click="add">添加</el-button>
|
||||
|
||||
<el-table :data="userResponse.list" style="width: 100%">
|
||||
<el-table-column label="用户编号" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userId}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户名字" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户类型" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="用户身份证" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userIdcard }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户年龄" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userAge }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户性别" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userGender }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户住址" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userAddress }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户职位" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userPosition }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户薪资" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userSal }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="手机号" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.phone }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="工作开始时间" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.userDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" @click="update(scope.row.userId)">编辑</el-button>
|
||||
<el-button size="mini" type="danger" @click="deleteId(scope.row.userId)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="userRequest.pageNum"
|
||||
:page-sizes="[1,2,3,4]"
|
||||
:page-size="userRequest.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="userResponse.total">
|
||||
</el-pagination>
|
||||
|
||||
<el-dialog :title="title" :visible.sync="dialogFormVisible">
|
||||
<el-form :model="User">
|
||||
<el-form-item label="用户名字" :label-width="formLabelWidth">
|
||||
<el-input v-model="User.userName" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户密码" :label-width="formLabelWidth">
|
||||
<el-input v-model="User.userPwd" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户类型" :label-width="formLabelWidth">
|
||||
<el-select v-model="User.userType" placeholder="请选择">
|
||||
<el-option label="管理员" value="3"></el-option>
|
||||
<el-option label="超级管理员" value="4"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户身份证" :label-width="formLabelWidth">
|
||||
<el-input v-model="User.userIdcard" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户年龄" :label-width="formLabelWidth">
|
||||
<el-input v-model="User.userAge" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户性别" :label-width="formLabelWidth">
|
||||
<el-select v-model="User.userGender" placeholder="请选择">
|
||||
<el-option label="男" value="男"></el-option>
|
||||
<el-option label="女" value="女"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户住址" :label-width="formLabelWidth">
|
||||
<el-input v-model="User.userAddress" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户职位" :label-width="formLabelWidth">
|
||||
<el-select v-model="User.userPosition" placeholder="请选择">
|
||||
<el-option label="管理员" value="管理员"></el-option>
|
||||
<el-option label="超级管理员" value="超级管理员"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户薪资" :label-width="formLabelWidth">
|
||||
<el-input v-model="User.userSal" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" :label-width="formLabelWidth">
|
||||
<el-input v-model="User.phone" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="工作开始时间" :label-width="formLabelWidth">
|
||||
<el-input v-model="User.userDate" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="operAdd">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {list2,add,update,findById,deleteId} from '@/api/user'
|
||||
|
||||
export default {
|
||||
name: 'User',
|
||||
data() {
|
||||
return {
|
||||
userRequest:{
|
||||
userId:'',
|
||||
pageNum:1,
|
||||
pageSize:3
|
||||
},
|
||||
userResponse:{
|
||||
total:0,
|
||||
list:[]
|
||||
},
|
||||
dialogFormVisible:false,
|
||||
formLabelWidth:"120px",
|
||||
title:'表单',
|
||||
User:{}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.onSubmit()
|
||||
},
|
||||
methods: {
|
||||
deleteId(userId){
|
||||
deleteId(userId).then(res=>{
|
||||
alert("删除成功")
|
||||
this.onSubmit();
|
||||
})
|
||||
},
|
||||
add(){
|
||||
this.dialogFormVisible=true
|
||||
this.title='添加'
|
||||
this.User={}
|
||||
},
|
||||
update(userId){
|
||||
findById(userId).then(res=>{
|
||||
this.dialogFormVisible=true
|
||||
this.title='修改'
|
||||
this.User=res.data
|
||||
})
|
||||
},
|
||||
|
||||
operAdd(){
|
||||
if (this.User.userId){
|
||||
this.updateUser()
|
||||
}else{
|
||||
this.addUser()
|
||||
}
|
||||
},
|
||||
updateUser(){
|
||||
update(this.User).then(res=>{
|
||||
this.dialogFormVisible=false
|
||||
this.User={}
|
||||
this.title='修改成功'
|
||||
alert("修改成功")
|
||||
this.onSubmit()
|
||||
})
|
||||
},
|
||||
addUser(){
|
||||
add(this.User).then(res=>{
|
||||
this.dialogFormVisible=false
|
||||
alert("添加成功")
|
||||
this.title='添加成功'
|
||||
this.User={}
|
||||
this.onSubmit()
|
||||
})
|
||||
},
|
||||
onSubmit(){
|
||||
list2(this.userRequest).then(res=>{
|
||||
this.userResponse=res.data
|
||||
})
|
||||
},
|
||||
|
||||
handleSizeChange(val){
|
||||
this.userRequest.pageSize=val
|
||||
this.onSubmit()
|
||||
},
|
||||
handleCurrentChange(val){
|
||||
this.userRequest.pageNum=val
|
||||
this.onSubmit()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
Loading…
Reference in New Issue