feat: 修改默认跳转页,完成Account页功能,修改部分全局样式,增加公共组件
This commit is contained in:
parent
d06e4f500a
commit
f987799c5c
BIN
src/assets/images/content/bg.jpg
Normal file
BIN
src/assets/images/content/bg.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 150 KiB |
67
src/components/CustomModal/index.vue
Normal file
67
src/components/CustomModal/index.vue
Normal file
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<a-modal v-bind="$attrs" v-model="visible" :title="title">
|
||||
<slot></slot>
|
||||
<template slot="footer">
|
||||
<a-space class="operators" :size="20">
|
||||
<a-button type="success" @click="onSave" :loading="confirmLoading">Save</a-button>
|
||||
<a-button type="warn" @click="onCancel">Cancel</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean
|
||||
},
|
||||
okHandler: {
|
||||
type: Function
|
||||
},
|
||||
title: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: this.value,
|
||||
confirmLoading: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(val) {
|
||||
this.$emit('input', val)
|
||||
},
|
||||
value(val) {
|
||||
this.visible = val
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async onSave() {
|
||||
if (this.okHandler instanceof Function) {
|
||||
try {
|
||||
this.confirmLoading = true
|
||||
await this.okHandler()
|
||||
this.visible = false
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
this.confirmLoading = false
|
||||
}
|
||||
} else {
|
||||
this.visible = false
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.operators {
|
||||
.ant-btn {
|
||||
width: 92px;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a-select v-bind="$attrs" v-model="innerValue">
|
||||
<a-select v-bind="$attrs" v-model="innerValue" show-arrow>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</template>
|
||||
|
@ -7,13 +7,13 @@
|
|||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
type: [String, Number, Array],
|
||||
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
innerValue: null
|
||||
innerValue: this.value
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
87
src/components/CustomTable/index.vue
Normal file
87
src/components/CustomTable/index.vue
Normal file
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<a-table
|
||||
v-bind="$attrs"
|
||||
:data-source="list"
|
||||
:columns="columns"
|
||||
:size="size"
|
||||
:row-key="rowKey"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:customRow="customRow"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<!-- 处理 scopedSlots -->
|
||||
<template v-for="slotName of scopedSlotsKeys" :slot="slotName" slot-scope="text, record, index">
|
||||
<slot :name="slotName" :text="text" :record="record" :index="index"></slot>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
<script>
|
||||
import {cloneDeep} from 'lodash'
|
||||
export default {
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'middle'
|
||||
},
|
||||
rowKey: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
loading: {
|
||||
type: Boolean
|
||||
},
|
||||
pagination: {
|
||||
type: Object
|
||||
},
|
||||
selectedRowKeys: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
innerSelectedRowKeys: cloneDeep(this.selectedRowKeys)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 实现单击选中/反选功能
|
||||
customRow(record) {
|
||||
return {
|
||||
class: this.innerSelectedRowKeys.includes(record.id) ? 'ant-table-row-selected' : '',
|
||||
on: {
|
||||
click: () => {
|
||||
if (this.innerSelectedRowKeys.includes(record.id)) {
|
||||
this.innerSelectedRowKeys = []
|
||||
} else {
|
||||
this.innerSelectedRowKeys = [record.id]
|
||||
}
|
||||
this.$emit('update:selectedRowKeys', this.innerSelectedRowKeys)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
handleTableChange(pagination, filters, sorter) {
|
||||
this.$emit('change', pagination, filters, sorter)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedRowKeys () {
|
||||
this.innerSelectedRowKeys = cloneDeep(this.selectedRowKeys)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
scopedSlotsKeys() {
|
||||
return Object.keys(this.$scopedSlots)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang=""></style>
|
|
@ -1,21 +1,19 @@
|
|||
<template>
|
||||
<div class="search-form">
|
||||
<a-row :gutter="20">
|
||||
<a-form-model ref="form" :model="formModel" v-bind="$attrs" @keyup.enter.native="onSearch">
|
||||
<a-form-model ref="form" :model="formModel" v-bind="$attrs" @keyup.enter.native="onSearch">
|
||||
<a-row :gutter="20">
|
||||
<a-col v-for="(item, index) in items" :key="index" :span="item.span || 6">
|
||||
<a-form-model-item :label="item.label" :prop="item.name" :labelCol="item.labelCol">
|
||||
<component :is="item.type" v-bind="item.props" v-model="formModel[item.name]" v-on="item.on"></component>
|
||||
</a-form-model-item>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<a-button class="search-btn" type="primary" @click="onSearch">
|
||||
<img src="@/assets/images/global/search.png" alt="">
|
||||
search
|
||||
</a-button>
|
||||
<slot name="additional"></slot>
|
||||
</a-col>
|
||||
</a-form-model>
|
||||
</a-row>
|
||||
<a-button class="search-btn" type="primary" @click="onSearch">
|
||||
<img src="@/assets/images/global/search.png" alt="" />
|
||||
search
|
||||
</a-button>
|
||||
<slot name="additional"></slot>
|
||||
</a-row>
|
||||
</a-form-model>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -60,8 +58,8 @@ export default {
|
|||
.search-form {
|
||||
height: 50px;
|
||||
padding: 10px;
|
||||
border-top: 1px solid rgba(12, 235, 201, .3);
|
||||
border-bottom: 1px solid rgba(12, 235, 201, .3);
|
||||
border-top: 1px solid rgba(12, 235, 201, 0.3);
|
||||
border-bottom: 1px solid rgba(12, 235, 201, 0.3);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
::v-deep .ant-form-item {
|
||||
|
@ -80,10 +78,10 @@ export default {
|
|||
}
|
||||
|
||||
.search-btn {
|
||||
img {
|
||||
width: 16px;
|
||||
height: 17px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
img {
|
||||
width: 16px;
|
||||
height: 17px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
import { CACHE_INCLUDED_ROUTES } from '@/store/mutation-types'
|
||||
import registerApps from "@/qiankun";
|
||||
|
||||
const indexKey = '/dashboard/analysis'
|
||||
const indexKey = '/station-operation'
|
||||
|
||||
export default {
|
||||
name: 'TabLayout',
|
||||
|
|
|
@ -769,11 +769,4 @@
|
|||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-layout {
|
||||
background: #061314;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
|
@ -26,7 +26,7 @@ export default {
|
|||
console.log('this.$route.matched', this.$route.matched)
|
||||
|
||||
this.breadList = []
|
||||
this.breadList.push({ name: 'dashboard-analysis', path: '/dashboard/analysis', meta: { title: '首页' } })
|
||||
this.breadList.push({ name: 'dashboard-analysis', path: '/station-operation', meta: { title: '首页' } })
|
||||
|
||||
this.name = this.$route.name
|
||||
this.$route.matched.forEach((item) => {
|
||||
|
|
|
@ -1,11 +1,7 @@
|
|||
<template>
|
||||
<div class="logo">
|
||||
<router-link :to="routerLinkTo">
|
||||
|
||||
<!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->
|
||||
<img v-if="navTheme === 'dark'" src="~@/assets/logo-white.png" alt="logo">
|
||||
<img v-else src="~@/assets/logo.png" alt="logo">
|
||||
<!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->
|
||||
<img src="~@/assets/logo.png" alt="logo">
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -11,7 +11,7 @@ export const asyncRouterMap = [
|
|||
name: 'dashboard',
|
||||
component: TabLayout,
|
||||
meta: { title: '首页' },
|
||||
redirect: '/dashboard/analysis',
|
||||
redirect: '/station-operation',
|
||||
children: [
|
||||
|
||||
// // dashboard
|
||||
|
|
|
@ -52,6 +52,7 @@ import './style.less'
|
|||
import { rules } from '@/utils/rules'
|
||||
|
||||
import CustomSelect from '@/components/CustomSelect'
|
||||
import CustomTable from '@/components/CustomTable'
|
||||
|
||||
Vue.prototype.rules = rules
|
||||
Vue.config.productionTip = false
|
||||
|
@ -67,6 +68,7 @@ Vue.use(vueBus);
|
|||
Vue.use(JeecgComponents);
|
||||
Vue.use(VueAreaLinkage);
|
||||
Vue.component('custom-select', CustomSelect)
|
||||
Vue.component('custom-table', CustomTable)
|
||||
|
||||
SSO.init(() => {
|
||||
main()
|
||||
|
|
9
src/mixins/FormMixin.js
Normal file
9
src/mixins/FormMixin.js
Normal file
|
@ -0,0 +1,9 @@
|
|||
export default {
|
||||
watch: {
|
||||
visible(val) {
|
||||
if(val && this.$refs.form) {
|
||||
this.$refs.form.resetFields()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -23,7 +23,7 @@ export const JeecgListMixin = {
|
|||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
const { current, pageSize } = this.ipagination
|
||||
return `共 ${total} 条记录 第${current} / ${Math.ceil(total / pageSize)} 页`
|
||||
return `共 ${total} 条记录 第 ${current} / ${Math.ceil(total / pageSize)} 页`
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
|
@ -81,6 +81,8 @@ export const JeecgListMixin = {
|
|||
if (arg === 1) {
|
||||
this.ipagination.current = 1;
|
||||
}
|
||||
this.onClearSelected()
|
||||
|
||||
var params = this.getQueryParams();//查询条件
|
||||
this.loading = true;
|
||||
getAction(this.url.list, params).then((res) => {
|
||||
|
|
|
@ -16,7 +16,7 @@ export const SYS_BUTTON_AUTH = 'SYS_BUTTON_AUTH'
|
|||
export const ENCRYPTED_STRING = 'ENCRYPTED_STRING'
|
||||
export const ENHANCE_PRE = 'enhance_'
|
||||
export const UI_CACHE_DB_DICT_DATA = 'UI_CACHE_DB_DICT_DATA'
|
||||
export const INDEX_MAIN_PAGE_PATH = '/dashboard/analysis'
|
||||
export const INDEX_MAIN_PAGE_PATH = '/station-operation'
|
||||
export const OAUTH2_LOGIN_PAGE_PATH = '/oauth2-app/login'
|
||||
export const TENANT_ID = 'TENANT_ID'
|
||||
export const ONL_AUTH_FIELDS = 'ONL_AUTH_FIELDS'
|
||||
|
|
265
src/style.less
265
src/style.less
|
@ -10,9 +10,21 @@
|
|||
src: url(~@/assets/fonts/BOOKOS.ttf);
|
||||
}
|
||||
|
||||
body {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ant-layout {
|
||||
background: url(~@/assets/images/content/bg.jpg) center center no-repeat;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@modalBg: #022024;
|
||||
|
||||
// 卡片样式
|
||||
.ant-card {
|
||||
background-color: #061214;
|
||||
background-color: transparent;
|
||||
.ant-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
@ -46,10 +58,15 @@
|
|||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
&.ant-table-row-selected {
|
||||
td {
|
||||
background-color: #0d4e5c !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-placeholder {
|
||||
background-color: #061214;
|
||||
background-color: transparent;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
@ -57,13 +74,16 @@
|
|||
background-color: 0d4e5c;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格下的分页器
|
||||
.ant-table-pagination {
|
||||
float: none !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// 表单样式
|
||||
.ant-form {
|
||||
@antFormSelector: .ant-form;
|
||||
@{antFormSelector} {
|
||||
&-item {
|
||||
&-label {
|
||||
> label {
|
||||
|
@ -71,6 +91,13 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
&-horizontal {
|
||||
@{antFormSelector} {
|
||||
&-item {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@formInputBgColor: #03353f;
|
||||
|
@ -84,6 +111,16 @@
|
|||
&::placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 单选样式
|
||||
.ant-radio {
|
||||
&-wrapper {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉框样式
|
||||
|
@ -93,21 +130,129 @@
|
|||
background-color: @formInputBgColor !important;
|
||||
border-color: @formInputBorderColor !important;
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
&__placeholder {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
&--multiple {
|
||||
.ant-select-selection__choice {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: 1px solid #0b8c82;
|
||||
&__remove {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-dropdown {
|
||||
background: #03353f;
|
||||
background-color: transparent;
|
||||
padding-top: 7px;
|
||||
|
||||
@borderColor: #0da397;
|
||||
&-content {
|
||||
border: 1px solid @borderColor;
|
||||
overflow: visible !important;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 20px;
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1px solid #0da397;
|
||||
background: #03353f;
|
||||
transform: rotate(45deg) skew(14deg, 14deg);
|
||||
}
|
||||
}
|
||||
&-menu {
|
||||
background: #03353f;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
&-item {
|
||||
color: #fff;
|
||||
background-color: #02282b;
|
||||
&:not(&-disabled):hover,
|
||||
&-selected,
|
||||
&-active {
|
||||
background-color: #08363c;
|
||||
font-family: Arial;
|
||||
border: 0;
|
||||
background-color: transparent !important;
|
||||
padding: 4px 14px;
|
||||
&:hover {
|
||||
background-color: #055565 !important;
|
||||
}
|
||||
&-selected {
|
||||
color: #0cebc9;
|
||||
font-weight: normal;
|
||||
}
|
||||
&-disabled {
|
||||
color: #476d74 !important;
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--multiple {
|
||||
// 多选
|
||||
color: #000;
|
||||
.ant-select-dropdown {
|
||||
&-menu-item {
|
||||
padding-left: 35px;
|
||||
.anticon-check {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 18px;
|
||||
left: 13px;
|
||||
border: 1px solid #0a544e !important;
|
||||
color: transparent !important;
|
||||
background-color: #03353f;
|
||||
}
|
||||
&-selected {
|
||||
.anticon-check {
|
||||
background: #00e9fe;
|
||||
border-color: #00e9fe;
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉框打开时的样式
|
||||
&-open {
|
||||
.ant-select {
|
||||
&-selection {
|
||||
background-color: #055565 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单
|
||||
.ant-dropdown {
|
||||
&-menu {
|
||||
background: #03353f;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
&-item {
|
||||
color: #fff;
|
||||
font-family: Arial;
|
||||
border: 0;
|
||||
background-color: transparent !important;
|
||||
padding: 4px 14px;
|
||||
&:hover {
|
||||
background-color: #055565 !important;
|
||||
}
|
||||
&-selected {
|
||||
color: #0cebc9;
|
||||
font-weight: normal;
|
||||
}
|
||||
&-disabled {
|
||||
color: #476d74 !important;
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -122,6 +267,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
// 树形结构
|
||||
.ant-tree {
|
||||
}
|
||||
|
||||
// 按钮
|
||||
.ant-btn {
|
||||
border-radius: 0;
|
||||
|
@ -130,6 +279,26 @@
|
|||
text-shadow: 0px 1px 0px #000;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&-success {
|
||||
// 自定义warn样式
|
||||
background-color: #08a7cf !important;
|
||||
color: #fff !important;
|
||||
border-color: #08a7cf !important;
|
||||
&:hover {
|
||||
background-color: #08a7cf !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-warn {
|
||||
// 自定义warn样式
|
||||
background-color: #b98326 !important;
|
||||
color: #fff !important;
|
||||
border-color: #b98326 !important;
|
||||
&:hover {
|
||||
background-color: #b98326 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 空状态
|
||||
|
@ -138,6 +307,7 @@
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
// 分页器样式
|
||||
.ant-pagination {
|
||||
&,
|
||||
&-item a {
|
||||
|
@ -162,7 +332,7 @@
|
|||
}
|
||||
&-disabled {
|
||||
.ant-pagination-item-link {
|
||||
color: #9ca2a6;
|
||||
color: #9ca2a6 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -213,6 +383,81 @@
|
|||
}
|
||||
}
|
||||
|
||||
// 弹窗样式
|
||||
.ant-modal {
|
||||
&-content {
|
||||
border-radius: 0;
|
||||
border: 1px solid #0c6a66;
|
||||
background-color: @modalBg;
|
||||
}
|
||||
&-header {
|
||||
background-color: #0c817b;
|
||||
padding: 0 20px;
|
||||
border-radius: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
&-title {
|
||||
font-family: MicrogrammaD-MediExte;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
&-close {
|
||||
color: #fff !important;
|
||||
&-x {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
&-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
&-footer {
|
||||
border-top: none;
|
||||
text-align: center;
|
||||
padding-bottom: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
// 确认弹窗样式
|
||||
.ant-modal-confirm {
|
||||
&-title,
|
||||
&-content {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 通知样式
|
||||
.ant-message {
|
||||
&-notice {
|
||||
&-content {
|
||||
background-color: @modalBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 抽屉
|
||||
.ant-drawer {
|
||||
&-content {
|
||||
background-color: @modalBg;
|
||||
}
|
||||
&-body {
|
||||
> div {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 警告提示
|
||||
.ant-alert {
|
||||
&-info {
|
||||
background-color: @modalBg;
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动条
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
|
|
|
@ -89,7 +89,7 @@ export function generateIndexRouter(data) {
|
|||
//component: () => import('@/components/layouts/BasicLayout'),
|
||||
component: resolve => require(['@/components/layouts/TabLayout'], resolve),
|
||||
meta: { title: '首页' },
|
||||
redirect: '/dashboard/analysis',
|
||||
redirect: '/station-operation',
|
||||
children: [
|
||||
...generateChildRouters(data)
|
||||
]
|
||||
|
|
|
@ -1,130 +1,97 @@
|
|||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域 -->
|
||||
<!-- 搜索栏 -->
|
||||
<search-form :items="formItems" v-model="queryParam" @search="searchQuery">
|
||||
<a-space style="float: right" class="btn-group" slot="additional">
|
||||
<a-button @click="handleAdd" type="primary">
|
||||
<img src="@/assets/images/global/add.png" alt="" />
|
||||
Add
|
||||
</a-button>
|
||||
<a-button @click="handleAdd" type="primary">
|
||||
<a-button @click="handleEdit" type="primary">
|
||||
<img src="@/assets/images/global/edit.png" alt="" />
|
||||
Edit
|
||||
</a-button>
|
||||
<a-button @click="handleAdd" type="primary">
|
||||
<a-button @click="onDel" type="primary">
|
||||
<img src="@/assets/images/global/delete.png" alt="" />
|
||||
Delete
|
||||
</a-button>
|
||||
<a-button @click="handleAdd" type="primary">
|
||||
<a-button @click="handleReset" type="primary">
|
||||
<img src="@/assets/images/global/reset-pwd.png" alt="" />
|
||||
Reset pwd
|
||||
</a-button>
|
||||
</a-space>
|
||||
</search-form>
|
||||
|
||||
<!-- 搜索栏结束 -->
|
||||
<!-- 列表 -->
|
||||
<div>
|
||||
<a-table
|
||||
ref="table"
|
||||
<custom-table
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:list="dataSource"
|
||||
:pagination="ipagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
:selectedRowKeys.sync="selectedRowKeys"
|
||||
>
|
||||
<template slot="index" slot-scope="text, record, index">
|
||||
<template slot="index" slot-scope="{ index }">
|
||||
{{ index + 1 }}
|
||||
</template>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
|
||||
<a-divider type="vertical" />
|
||||
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" @click="handleDetail(record)">详情</a>
|
||||
</a-menu-item>
|
||||
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" @click="handleChangePassword(record.username)">密码</a>
|
||||
</a-menu-item>
|
||||
|
||||
<a-menu-item>
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
|
||||
<a-menu-item v-if="record.status == 1">
|
||||
<a-popconfirm title="确定冻结吗?" @confirm="() => handleFrozen(record.id, 2, record.username)">
|
||||
<a>冻结</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
|
||||
<a-menu-item v-if="record.status == 2">
|
||||
<a-popconfirm title="确定解冻吗?" @confirm="() => handleFrozen(record.id, 1, record.username)">
|
||||
<a>解冻</a>
|
||||
</a-popconfirm>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</span>
|
||||
</a-table>
|
||||
</custom-table>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
<!-- 列表结束 -->
|
||||
<!-- 新增/编辑 账号 -->
|
||||
<custom-modal :title="isAdd ? 'Add' : 'Edit'" v-model="visible" :width="475" :okHandler="onSubmit">
|
||||
<a-form-model
|
||||
ref="form"
|
||||
layout="horizontal"
|
||||
:model="accountModel"
|
||||
:rules="rules"
|
||||
:labelCol="{ style: { width: '80px' } }"
|
||||
:wrapperCol="{ style: { width: '300px' } }"
|
||||
autocomplete="off"
|
||||
>
|
||||
<a-form-model-item label="User" prop="username">
|
||||
<a-input v-model="accountModel.username"></a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="Name">
|
||||
<a-input type="text" v-model="accountModel.realname"></a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="Role">
|
||||
<custom-select :options="roleOptions" mode="multiple" v-model="accountModel.selectedroles"></custom-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="E-Mail">
|
||||
<a-input v-model="accountModel.email"></a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="Phone">
|
||||
<a-input v-model="accountModel.phone"></a-input>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</custom-modal>
|
||||
<!-- 新增/编辑 账号结束 -->
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
||||
import SearchForm from '@/components/SearchForm'
|
||||
|
||||
const formItems = [
|
||||
{
|
||||
type: 'a-input',
|
||||
label: 'User',
|
||||
name: 'username',
|
||||
span: 4
|
||||
},
|
||||
{
|
||||
type: 'a-input',
|
||||
label: 'Name',
|
||||
name: 'realname',
|
||||
span: 4
|
||||
},
|
||||
{
|
||||
type: 'custom-select',
|
||||
label: 'Role',
|
||||
name: 'role',
|
||||
span: 4,
|
||||
props: {
|
||||
options: [
|
||||
{
|
||||
label: 'test',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: 'test2',
|
||||
value: '2'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
import CustomModal from '@/components/CustomModal'
|
||||
import { queryall, addUser, editUser, changePassword } from '@/api/api'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import FormMixin from '@/mixins/FormMixin'
|
||||
|
||||
export default {
|
||||
name: 'UserList',
|
||||
mixins: [JeecgListMixin],
|
||||
mixins: [JeecgListMixin, FormMixin],
|
||||
components: {
|
||||
SearchForm
|
||||
SearchForm,
|
||||
CustomModal
|
||||
},
|
||||
data() {
|
||||
this.formItems = formItems
|
||||
return {
|
||||
queryParam: {},
|
||||
queryParam: {
|
||||
role: undefined
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: 'NO',
|
||||
|
@ -162,10 +129,144 @@ export default {
|
|||
url: {
|
||||
list: '/sys/user/list',
|
||||
delete: '/sys/user/delete'
|
||||
},
|
||||
roleOptions: [],
|
||||
visible: false,
|
||||
isAdd: false,
|
||||
accountModel: {},
|
||||
rules: {
|
||||
username: [{ required: true, message: 'Please Enter User' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
created() {
|
||||
this.getRoles()
|
||||
},
|
||||
methods: {
|
||||
customRow(record) {
|
||||
return {
|
||||
class: this.selectedRowKeys.includes(record.id) ? 'ant-table-row-selected' : '',
|
||||
on: {
|
||||
click: () => {
|
||||
if (this.selectedRowKeys.includes(record.id)) {
|
||||
this.selectedRowKeys = []
|
||||
} else {
|
||||
this.selectedRowKeys = [record.id]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async getRoles() {
|
||||
try {
|
||||
const res = await queryall()
|
||||
if (res.success) {
|
||||
this.roleOptions = res.result.map(item => {
|
||||
return {
|
||||
label: item.roleName,
|
||||
value: item.id
|
||||
}
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
|
||||
handleAdd() {
|
||||
this.visible = true
|
||||
this.isAdd = true
|
||||
this.accountModel = {}
|
||||
},
|
||||
handleEdit() {
|
||||
if (this.selectedRowKeys && this.selectedRowKeys.length) {
|
||||
this.visible = true
|
||||
this.isAdd = false
|
||||
const find = this.dataSource.find(item => item.id === this.selectedRowKeys[0])
|
||||
this.accountModel = cloneDeep(find)
|
||||
} else {
|
||||
this.$message.warn('Please select an item you want to edit')
|
||||
}
|
||||
},
|
||||
|
||||
// 提交
|
||||
async onSubmit() {
|
||||
await this.$refs.form.validate()
|
||||
const request = this.isAdd ? addUser : editUser
|
||||
const { success, message } = await request(this.accountModel)
|
||||
if (success) {
|
||||
this.$message.success(`${this.isAdd ? 'Add' : 'Edit'} Success`)
|
||||
this.loadData()
|
||||
} else {
|
||||
this.$message.error(`${this.isAdd ? 'Add' : 'Edit'} Fail`)
|
||||
throw new Error(message)
|
||||
}
|
||||
},
|
||||
onDel() {
|
||||
if (this.selectedRowKeys && this.selectedRowKeys.length) {
|
||||
this.$confirm({
|
||||
title: 'Do you want to delete this item?',
|
||||
okText: 'OK',
|
||||
cancelText: 'Cancel',
|
||||
onOk: () => {
|
||||
this.handleDelete(this.selectedRowKeys[0])
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warn('Please select an item you want to delete')
|
||||
}
|
||||
},
|
||||
handleReset() {
|
||||
if (this.selectedRowKeys && this.selectedRowKeys.length) {
|
||||
const find = this.dataSource.find(item => item.id === this.selectedRowKeys[0])
|
||||
this.$confirm({
|
||||
title: 'Do you want to reset password?',
|
||||
okText: 'OK',
|
||||
cancelText: 'Cancel',
|
||||
onOk: async () => {
|
||||
const { success, message } = await changePassword({
|
||||
username: find.username
|
||||
})
|
||||
if(success) {
|
||||
this.$message.success('Reset Success')
|
||||
}
|
||||
else {
|
||||
this.$message.error('Reset Fail')
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warn('Please select an item you want to reset password')
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formItems() {
|
||||
return [
|
||||
{
|
||||
type: 'a-input',
|
||||
label: 'User',
|
||||
name: 'username',
|
||||
span: 4
|
||||
},
|
||||
{
|
||||
type: 'a-input',
|
||||
label: 'Name',
|
||||
name: 'realname',
|
||||
span: 4
|
||||
},
|
||||
{
|
||||
type: 'custom-select',
|
||||
label: 'Role',
|
||||
name: 'role',
|
||||
span: 4,
|
||||
props: {
|
||||
options: this.roleOptions
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
|
|
|
@ -127,7 +127,7 @@ export default {
|
|||
},
|
||||
//登录成功
|
||||
loginSuccess () {
|
||||
this.$router.push({ path: "/dashboard/analysis" }).catch(()=>{
|
||||
this.$router.push({ path: "/station-operation" }).catch(()=>{
|
||||
console.log('登录跳转首页出错,这个错误从哪里来的')
|
||||
})
|
||||
this.$notification.success({
|
||||
|
|
|
@ -183,7 +183,7 @@ export const JeecgThirdLoginMixin = {
|
|||
// update-begin- author:sunjianlei --- date:20190812 --- for: 登录成功后不解除禁用按钮,防止多次点击
|
||||
// this.loginBtn = false
|
||||
// update-end- author:sunjianlei --- date:20190812 --- for: 登录成功后不解除禁用按钮,防止多次点击
|
||||
this.$router.push({ path: "/dashboard/analysis" }).catch(()=>{
|
||||
this.$router.push({ path: "/station-operation" }).catch(()=>{
|
||||
console.log('登录跳转首页出错,这个错误从哪里来的')
|
||||
})
|
||||
this.$notification.success({
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
const path = require('path')
|
||||
const CompressionPlugin = require("compression-webpack-plugin")
|
||||
const CompressionPlugin = require('compression-webpack-plugin')
|
||||
|
||||
function resolve(dir) {
|
||||
return path.join(__dirname, dir)
|
||||
|
@ -14,8 +14,8 @@ module.exports = {
|
|||
*/
|
||||
// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
|
||||
productionSourceMap: false,
|
||||
//qiankuan打包时放开
|
||||
//outputDir: "../dist/main",
|
||||
// qiankuan打包时放开
|
||||
// outputDir: "../dist/main",
|
||||
// 多入口配置
|
||||
// pages: {
|
||||
// index: {
|
||||
|
@ -24,10 +24,10 @@ module.exports = {
|
|||
// filename: 'index.html',
|
||||
// }
|
||||
// },
|
||||
//打包app时放开该配置
|
||||
//publicPath:'/',
|
||||
// 打包app时放开该配置
|
||||
// publicPath:'/',
|
||||
configureWebpack: config => {
|
||||
//生产环境取消 console.log
|
||||
// 生产环境取消 console.log
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
|
||||
}
|
||||
|
@ -40,7 +40,7 @@ module.exports = {
|
|||
.set('@comp', resolve('src/components'))
|
||||
.set('@views', resolve('src/views'))
|
||||
|
||||
//生产环境,开启js\css压缩
|
||||
// 生产环境,开启js\css压缩
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
config.plugin('compressionPlugin').use(new CompressionPlugin({
|
||||
test: /\.(js|css|less)$/, // 匹配文件名
|
||||
|
@ -68,7 +68,6 @@ module.exports = {
|
|||
.use()
|
||||
.loader('babel-loader')
|
||||
.end()
|
||||
|
||||
},
|
||||
|
||||
css: {
|
||||
|
@ -79,8 +78,9 @@ module.exports = {
|
|||
'primary-color': '#1397a3',
|
||||
'link-color': '#1397a3',
|
||||
'border-radius-base': '4px',
|
||||
'text-color': '#fff'
|
||||
},
|
||||
javascriptEnabled: true,
|
||||
javascriptEnabled: true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -104,16 +104,16 @@ module.exports = {
|
|||
pathRewrite: {
|
||||
'/jeecg-boot': '' //默认所有请求都加了jeecg-boot前缀,需要去掉
|
||||
}
|
||||
},*/
|
||||
}, */
|
||||
/* 注意:jeecgboot前端做了改造,此处不需要配置跨域和后台接口(只需要改.env相关配置文件即可)
|
||||
issues/3462 很多人此处做了配置,导致刷新前端404问题,请一定注意*/
|
||||
issues/3462 很多人此处做了配置,导致刷新前端404问题,请一定注意 */
|
||||
'/jeecg-boot': {
|
||||
target: 'http://localhost:8080',
|
||||
ws: false,
|
||||
changeOrigin: true
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
lintOnSave: undefined
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user