fix: 优化各页面

This commit is contained in:
Xu Zhimeng 2023-05-26 20:06:17 +08:00
parent 0f5deea676
commit fa1bdd7e3b
10 changed files with 207 additions and 79 deletions

View File

@ -1,20 +1,25 @@
<template>
<a-date-picker v-bind="$attrs">
<img src="@/assets/images/global/calendar.png" slot="suffixIcon" alt="" srcset="">
</a-date-picker>
<a-date-picker v-bind="$attrs" v-model="innerValue">
<img src="@/assets/images/global/calendar.png" slot="suffixIcon" alt="" srcset="" />
</a-date-picker>
</template>
<script>
export default {
props: {
value: {
type: [String, Object]
}
},
methods: {
props: {
value: {
type: [String, Object]
}
},
computed: {
innerValue: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
}
}
</script>
<style lang="">
</style>
<style lang=""></style>

View File

@ -0,0 +1,25 @@
<template>
<a-month-picker v-bind="$attrs" v-model="innerValue">
<img src="@/assets/images/global/calendar.png" slot="suffixIcon" alt="" srcset="" />
</a-month-picker>
</template>
<script>
export default {
props: {
value: {
type: [String, Object]
}
},
computed: {
innerValue: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
}
}
</script>
<style lang=""></style>

View File

@ -7,7 +7,7 @@
placement="bottom"
:overlayStyle="{ width: width + 'px' }"
>
<a-input ref="inputRef" :placeholder="placeholder" v-model="innerKeyWord" @click.stop="">
<a-input ref="inputRef" :placeholder="placeholder" v-model="innerKeyWord" @click.stop="" @keypress.enter="onSearch">
<template slot="suffix">
<img class="popover-search-btn" src="@/assets/images/global/search-blue.png" @click.stop="onSearch" />
</template>

View File

@ -1,6 +1,12 @@
<template>
<div class="tree-with-line">
<a-tree v-bind="$attrs" :selected-keys="selectedKeys" :expandedKeys="expandedKeys" @select="onSelect" @expand="onExpand">
<a-tree
v-bind="$attrs"
:selected-keys="selectedKeys"
:expandedKeys="expandedKeys"
@select="onSelect"
@expand="onExpand"
>
<template slot="switcherIcon">
<div></div>
</template>
@ -36,6 +42,22 @@ export default {
@bgColor: #022024;
::v-deep .ant-tree {
border-left: 1px dotted @borderColor;
font-size: 18px;
padding-top: 21px;
&-node-content-wrapper {
background-color: transparent !important;
height: 32px !important;
line-height: 32px !important;
padding-right: 0;
}
&-node-selected {
color: #0cebc9 !important;
.ant-tree-title {
padding-left: 10px;
}
}
&-switcher {
background: transparent !important;
width: 17px;
@ -44,7 +66,7 @@ export default {
display: none;
}
&-icon {
margin-top: 3px;
margin-top: 7px;
background: url(~@/assets/images/global/switcher.png) center center no-repeat;
position: relative;
z-index: 1;
@ -82,20 +104,23 @@ export default {
content: '';
position: absolute;
border-left: 1px dotted @borderColor;
top: -14px;
top: -17px;
height: 100%;
z-index: 0;
}
li {
> li {
&:first-child {
padding-top: 0;
}
&:last-child {
position: relative;
padding-top: 4px;
padding-top: 0;
&::after {
content: '';
background-color: @bgColor;
position: absolute;
top: 16px;
left: -1;
left: -1px;
height: calc(100% - 14px);
width: 3px;
z-index: 1;
@ -104,6 +129,10 @@ export default {
}
}
li {
padding: 0;
}
> li:last-child {
position: relative;
&::after {
@ -118,10 +147,15 @@ export default {
}
}
&-node-content-wrapper {
.ant-tree-switcher-noop + .ant-tree-node-content-wrapper {
display: inline-block;
width: calc(100% - 20px);
}
.ant-tree-node-content-wrapper {
width: calc(100% - 36px);
}
&-node-selected {
.ant-tree-title {
display: block;

View File

@ -55,6 +55,7 @@ import CustomSelect from '@/components/CustomSelect'
import CustomTable from '@/components/CustomTable'
import CustomModal from '@/components/CustomModal'
import CustomDatePicker from '@/components/CustomDatePicker'
import CustomMonthPicker from '@/components/CustomMonthPicker'
Vue.prototype.rules = rules
@ -75,6 +76,7 @@ Vue.component('custom-select', CustomSelect)
Vue.component('custom-table', CustomTable)
Vue.component('custom-modal', CustomModal)
Vue.component('custom-date-picker', CustomDatePicker)
Vue.component('custom-month-picker', CustomMonthPicker)
SSO.init(() => {
main()

View File

@ -18,12 +18,12 @@
@modal-footer-border-color-split: @formInputBorderColor;
.ant-btn:hover, .ant-btn:active {
.ant-btn:hover,
.ant-btn:active {
color: #fff !important;
border-color: transparent;
}
@font-face {
font-family: MicrogrammaD-MediExte;
src: url(~@/assets/fonts/MicrogrammaDMedExt.ttf);
@ -60,6 +60,7 @@ body {
// 表格样式
.ant-table {
color: #ade6ee;
font-size: 16px;
&-thead {
> tr {
th {
@ -285,6 +286,10 @@ body {
}
}
&-table {
background-color: #06282A !important;
}
&-tbody {
border-bottom: 1px solid #25454e;
}
@ -521,10 +526,21 @@ body {
// 树形结构
.ant-tree {
&-checkbox {
&-checked {
.ant-tree-checkbox-inner {
background-color: #00e9fe !important;
border-color: #00e9fe !important;
}
}
}
&-checkbox-inner {
background-color: #03353f !important;
border-color: #0a544e !important;
border-radius: 0;
&::after {
border-color: #000 !important;
}
}
&-node-content-wrapper {
background-color: transparent !important;
@ -535,24 +551,22 @@ body {
border-color: #0a544e !important;
}
.ant-tree-checkbox-disabled {
.ant-tree-checkbox-inner {
&::after {
border-color: rgba(255, 255, 255, .2) !important;
}
.ant-tree-checkbox-inner {
&::after {
border-color: rgba(0, 0, 0, 0.3) !important;
}
}
.ant-tree-title {
color: #fff !important;
}
}
}
&-node-selected {
.ant-tree-title {
color: #0cebc9;
color: #0cebc9 !important;
}
}
&-title {
user-select: none;
color: #ade6ee !important;
}
}
@ -814,7 +828,7 @@ body {
.ant-spin {
&-blur::after {
opacity: .1;
opacity: 0.1;
}
}

View File

@ -28,7 +28,7 @@ const err = (error) => {
console.log("------异常响应------",error.response.status)
switch (error.response.status) {
case 403:
Vue.prototype.$Jnotification.error({ message: '系统提示', description: '拒绝访问',duration: 4})
Vue.prototype.$Jnotification.error({ message: 'System Prompt', description: 'Access Deny',duration: 4})
break
case 500:
console.log("------error.response------",error.response)
@ -69,13 +69,13 @@ const err = (error) => {
}
break
case 404:
Vue.prototype.$Jnotification.error({ message: '系统提示', description:'很抱歉,资源未找到!',duration: 4})
Vue.prototype.$Jnotification.error({ message: 'System Prompt', description:'Not Found',duration: 4})
break
case 504:
Vue.prototype.$Jnotification.error({ message: '系统提示', description: '网络超时'})
Vue.prototype.$Jnotification.error({ message: 'System Prompt', description: 'Network Timeout'})
break
case 401:
Vue.prototype.$Jnotification.error({ message: '系统提示', description:'很抱歉,登录已过期,请重新登录',duration: 4})
Vue.prototype.$Jnotification.error({ message: 'System Prompt', description:'Login Expired',duration: 4})
if (token) {
store.dispatch('Logout').then(() => {
setTimeout(() => {
@ -86,7 +86,7 @@ const err = (error) => {
break
default:
Vue.prototype.$Jnotification.error({
message: '系统提示',
message: 'System Prompt',
description: data.message,
duration: 4
})
@ -94,9 +94,9 @@ const err = (error) => {
}
} else if (error.message) {
if (error.message.includes('timeout')) {
Vue.prototype.$Jnotification.error({message: '系统提示', description: '网络超时'})
Vue.prototype.$Jnotification.error({message: 'System Prompt', description: 'Network Timeout'})
} else {
Vue.prototype.$Jnotification.error({message: '系统提示', description: error.message})
Vue.prototype.$Jnotification.error({message: 'System Prompt', description: error.message})
}
}
return Promise.reject(error)

View File

@ -17,15 +17,15 @@
</template>
<!-- 标题结束 -->
<!-- 内容 -->
<a-spin :spinning="isGettingTreeData" style="min-height: 200px">
<tree-with-line
:treeData="treeData"
:selected-keys.sync="selectedKeys"
:expanded-keys.sync="expandedKeys"
@select="onSelect"
>
</tree-with-line>
</a-spin>
<a-spin :spinning="isGettingTreeData" style="margin-top: 80px; width: 100%; text-align: center;"> </a-spin>
<tree-with-line
v-if="treeData.length"
:treeData="treeData"
:selected-keys.sync="selectedKeys"
:expanded-keys.sync="expandedKeys"
@select="onSelect"
>
</tree-with-line>
<!-- 内容结束 -->
</a-card>
<!-- 日志列表 -->
@ -55,13 +55,8 @@
</custom-table>
</div>
<!-- 日志列表结束 -->
<custom-modal
title="Log"
:width="620"
v-model="visible"
:show-footer="false"
>
<a-spin :spinning="isGettingDetail" style="min-height: 100px; max-height: 520px; overflow: auto; white-space: nowrap; padding: 10px;">
<custom-modal title="Log" :width="950" v-model="visible" :show-footer="false">
<a-spin class="log-detail" :spinning="isGettingDetail">
<div v-for="(logItem, index) in logInfo" :key="index">
{{ logItem }}
</div>
@ -204,7 +199,6 @@ export default {
try {
this.isGettingDetail = true
const res = await postAction('/logManage/downloadFile', formData)
console.log('%c [ res ]-206', 'font-size:13px; background:pink; color:#bf2c9f;', res.split('\r\n'))
this.logInfo = res.split('\r\n')
} catch (error) {
console.error(error)
@ -253,7 +247,7 @@ export default {
}
}
&-body {
padding: 0 20px;
padding-left: 20px;
height: calc(100% - 50px);
overflow: auto;
}
@ -305,8 +299,16 @@ export default {
}
}
}
}
&-list {
.log-detail {
::v-deep {
.ant-spin-container {
min-height: 100px;
max-height: 520px;
overflow: auto;
padding: 10px;
}
}
}
</style>

View File

@ -4,7 +4,9 @@
<a-card class="scheduling-list">
<!-- 标题 -->
<template slot="title">
Scheduling
<div class="card-title">
Scheduling
</div>
<div class="line"></div>
</template>
<!-- 标题结束 -->
@ -36,9 +38,8 @@
draggable
@dragstart="onDragStart(station, item.userId)"
>
{{ station.stationName }}
{{ station.stationName + (index == item.stationList.length - 1 ? '' : '、') }}
</span>
{{ index == item.stationList.length - 1 ? '' : '、' }}
</template>
</div>
<!-- 右侧边框 -->
@ -63,7 +64,7 @@
<a-col :span="6">
<a-form-model class="search-form-form">
<a-form-model-item label="Month" style="marign-bottom: 0">
<a-month-picker v-model="currentMonth" :allow-clear="false"></a-month-picker>
<custom-month-picker v-model="currentMonth" :allow-clear="false"></custom-month-picker>
</a-form-model-item>
</a-form-model>
</a-col>
@ -76,11 +77,17 @@
<img src="@/assets/images/global/edit.png" alt="" />
Edit
</a-button>
<a-button type="primary">
<img src="@/assets/images/global/import.png" alt="" />
Import
<a-button type="primary" @click="onDownloadTpl">
<img src="@/assets/images/global/export.png" alt="" />
Download Template
</a-button>
<a-button type="primary">
<a-upload :custom-request="onImport" accept=".xlsx, .xls" :show-upload-list="false">
<a-button type="primary">
<img src="@/assets/images/global/import.png" alt="" />
Import
</a-button>
</a-upload>
<a-button type="primary" @click="onExport">
<img src="@/assets/images/global/export.png" alt="" />
Export
</a-button>
@ -145,9 +152,9 @@
v-if="direction === 'right'"
blockNode
checkStrictly
defaultExpandAll
:treeData="accountTreeData"
:selectedKeys.sync="rightAccountChildSelectedKeys"
:expandedKeys.sync="rightAccountChildExpandedKeys"
@select="
(_, props) => {
onSelectAccount(_, props, itemSelect)
@ -181,7 +188,7 @@ import moment from 'moment'
import { cloneDeep } from 'lodash'
import { getAction } from '@/api/manage'
import CustomPopoverSearch from '@/components/CustomPopoverSearch'
import { deleteAction, postAction, putAction } from '../../api/manage'
import { deleteAction, downloadFile, postAction, putAction } from '../../api/manage'
const dateFormat = 'YYYY-MM-DD'
const monthFormat = 'YYYY-MM'
@ -222,6 +229,7 @@ export default {
accountTreeData: [], //
checkedAccount: '', // 穿
rightAccountChildSelectedKeys: [], // 穿
rightAccountChildExpandedKeys: [], // 穿
isChanging: false,
dragItem: null,
@ -378,6 +386,8 @@ export default {
this.targetKeys = []
this.accountTreeData = []
this.rightAccountChildSelectedKeys = []
this.rightAccountChildExpandedKeys = []
this.checkedAccount = ''
},
@ -390,16 +400,34 @@ export default {
this.visible = true
this.rightAccountChildSelectedKeys = []
this.rightAccountChildExpandedKeys = []
this.checkedAccount = ''
this.keyword = ''
this.getScheduleDetail()
},
onImport() {
console.log('%c [ 新增 ]-88', 'font-size:13px; background:pink; color:#bf2c9f;')
async onImport({ file }) {
try {
const formData = new FormData()
formData.append('file', file)
const { success, failure } = await postAction('/sysTask/importExcel', formData)
this.$message.success(`${success} Success, ${failure} Fail`)
this.getList()
} catch (error) {
console.error(error)
}
},
onDownloadTpl() {
downloadFile('/sysTask/exportImportTemplate', 'Schedule Template.xlsx')
},
onExport() {
console.log('%c [ 新增 ]-88', 'font-size:13px; background:pink; color:#bf2c9f;')
const currentMonth = this.currentMonth.format('YYYY-MM')
const formData = new FormData()
formData.append('yearMonth', currentMonth)
downloadFile('/sysTask/exportExcel', 'Schedule-' + currentMonth + '.xlsx', formData, 'post')
},
//
@ -578,10 +606,10 @@ export default {
}
})
findAccount.children.push(...children)
this.rightAccountChildExpandedKeys = [findAccount.key]
}
} else {
const moveKey = moveKeys[0]
console.log('%c [ moveKey ]-577', 'font-size:13px; background:pink; color:#bf2c9f;', moveKey)
let parentIndex = -1,
childIndex = -1
for (const pIndex in this.accountTreeData) {
@ -621,7 +649,7 @@ export default {
&-list {
flex-shrink: 0;
width: 350px;
height: 100%;
height: calc(100% - 2px);
background-color: #022024;
border-color: rgb(12, 106, 102, 0.9);
border-radius: 0;
@ -634,15 +662,23 @@ export default {
padding-left: 15px;
background-color: #022024;
border-bottom-color: rgba(12, 235, 201, 0.3);
position: relative;
&-title {
padding-top: 22px;
padding-bottom: 0;
}
.card-title {
height: 18px;
line-height: 18px;
margin-bottom: 11px;
}
.line {
width: 70px;
height: 3px;
background-color: #0cebc9;
margin-top: 10px;
position: absolute;
bottom: -1px;
}
}
&-body {
@ -703,7 +739,7 @@ export default {
border: 1px solid @borderColor;
background-color: @bgColor;
position: absolute;
top: 25px;
top: 28px;
left: 2px;
width: 9px;
height: 9px;
@ -713,7 +749,7 @@ export default {
}
}
.left-bottom-border {
height: calc(100% - 30px);
height: calc(100% - 33px);
position: absolute;
left: 0;
bottom: 0;
@ -751,14 +787,17 @@ export default {
}
}
&-content {
min-height: 62px;
min-height: 63px;
border-top: 1px solid @borderColor;
border-left: 1px solid @borderColor;
padding: 6px;
padding: 5px 6px 5px 18px;
background-color: @bgColor;
line-height: 26px;
flex: 1;
color: #6ebad0;
> span {
margin-left: -6px;
}
}
}
}
@ -778,6 +817,12 @@ export default {
overflow: auto;
padding-right: 5px;
}
.ant-fullcalendar-date {
height: 127px !important;
}
.ant-fullcalendar-content {
height: 60px !important;
}
}
}
.search-form {

View File

@ -146,7 +146,7 @@ export default {
],
url: {
list: '/sys/user/list',
delete: '/sys/user/delete'
delete: '/sys/user/deleteById'
},
roleOptions: [],
visible: false,
@ -226,7 +226,8 @@ export default {
onDel() {
if (this.selectedRowKeys && this.selectedRowKeys.length) {
this.$confirm({
title: 'Do You Want To Delete This Item?',
title: 'Do You Want To Delete This Account?',
content: 'Will Delete All Data Related To This Account, Are You Sure?',
okText: 'OK',
cancelText: 'Cancel',
onOk: () => {