xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化各页面

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/CustomDatePicker/index.vue
View File

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

25
src/components/CustomMonthPicker/index.vue Normal file
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>

2
src/components/CustomPopoverSearch/index.vue
View File

@ -7,7 +7,7 @@
placement="bottom" placement="bottom"
:overlayStyle="{ width: width + 'px' }" :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"> <template slot="suffix">
<img class="popover-search-btn" src="@/assets/images/global/search-blue.png" @click.stop="onSearch" /> <img class="popover-search-btn" src="@/assets/images/global/search-blue.png" @click.stop="onSearch" />
</template> </template>

48
src/components/TreeWithLine/index.vue
View File

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

2
src/main.js
View File

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

36
src/style.less
View File

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

14
src/utils/request.js
View File

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

40
src/views/logManage/index.vue
View File

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

83
src/views/system/Scheduling.vue
View File

@ -4,7 +4,9 @@
<a-card class="scheduling-list"> <a-card class="scheduling-list">
<!-- 标题 --> <!-- 标题 -->
<template slot="title"> <template slot="title">
Scheduling <div class="card-title">
Scheduling
</div>
<div class="line"></div> <div class="line"></div>
</template> </template>
<!-- 标题结束 --> <!-- 标题结束 -->
@ -36,9 +38,8 @@
draggable draggable
@dragstart="onDragStart(station, item.userId)" @dragstart="onDragStart(station, item.userId)"
> >
{{ station.stationName }} {{ station.stationName + (index == item.stationList.length - 1 ? '' : '、') }}
</span> </span>
{{ index == item.stationList.length - 1 ? '' : '、' }}
</template> </template>
</div> </div>
<!-- 右侧边框 --> <!-- 右侧边框 -->
@ -63,7 +64,7 @@
<a-col :span="6"> <a-col :span="6">
<a-form-model class="search-form-form"> <a-form-model class="search-form-form">
<a-form-model-item label="Month" style="marign-bottom: 0"> <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-item>
</a-form-model> </a-form-model>
</a-col> </a-col>
@ -76,11 +77,17 @@
<img src="@/assets/images/global/edit.png" alt="" /> <img src="@/assets/images/global/edit.png" alt="" />
Edit Edit
</a-button> </a-button>
<a-button type="primary"> <a-button type="primary" @click="onDownloadTpl">
<img src="@/assets/images/global/import.png" alt="" /> <img src="@/assets/images/global/export.png" alt="" />
Import Download Template
</a-button> </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="" /> <img src="@/assets/images/global/export.png" alt="" />
Export Export
</a-button> </a-button>
@ -145,9 +152,9 @@
v-if="direction === 'right'" v-if="direction === 'right'"
blockNode blockNode
checkStrictly checkStrictly
defaultExpandAll
:treeData="accountTreeData" :treeData="accountTreeData"
:selectedKeys.sync="rightAccountChildSelectedKeys" :selectedKeys.sync="rightAccountChildSelectedKeys"
:expandedKeys.sync="rightAccountChildExpandedKeys"
@select=" @select="
(_, props) => { (_, props) => {
onSelectAccount(_, props, itemSelect) onSelectAccount(_, props, itemSelect)
@ -181,7 +188,7 @@ import moment from 'moment'
import { cloneDeep } from 'lodash' import { cloneDeep } from 'lodash'
import { getAction } from '@/api/manage' import { getAction } from '@/api/manage'
import CustomPopoverSearch from '@/components/CustomPopoverSearch' 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 dateFormat = 'YYYY-MM-DD'
const monthFormat = 'YYYY-MM' const monthFormat = 'YYYY-MM'
@ -222,6 +229,7 @@ export default {
accountTreeData: [], // 用户列表树状结构 accountTreeData: [], // 用户列表树状结构
checkedAccount: '', // 右侧穿梭框选中的账号 checkedAccount: '', // 右侧穿梭框选中的账号
rightAccountChildSelectedKeys: [], // 右侧穿梭框选中的值 rightAccountChildSelectedKeys: [], // 右侧穿梭框选中的值
rightAccountChildExpandedKeys: [], // 右侧穿梭框中展开的父元素
isChanging: false, isChanging: false,
dragItem: null, dragItem: null,
@ -378,6 +386,8 @@ export default {
this.targetKeys = [] this.targetKeys = []
this.accountTreeData = [] this.accountTreeData = []
this.rightAccountChildSelectedKeys = [] this.rightAccountChildSelectedKeys = []
this.rightAccountChildExpandedKeys = []
this.checkedAccount = '' this.checkedAccount = ''
}, },
@ -390,16 +400,34 @@ export default {
this.visible = true this.visible = true
this.rightAccountChildSelectedKeys = [] this.rightAccountChildSelectedKeys = []
this.rightAccountChildExpandedKeys = []
this.checkedAccount = '' this.checkedAccount = ''
this.keyword = ''
this.getScheduleDetail() this.getScheduleDetail()
}, },
onImport() { async onImport({ file }) {
console.log('%c [ 新增 ]-88', 'font-size:13px; background:pink; color:#bf2c9f;') 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() { 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) findAccount.children.push(...children)
this.rightAccountChildExpandedKeys = [findAccount.key]
} }
} else { } else {
const moveKey = moveKeys[0] const moveKey = moveKeys[0]
console.log('%c [ moveKey ]-577', 'font-size:13px; background:pink; color:#bf2c9f;', moveKey)
let parentIndex = -1, let parentIndex = -1,
childIndex = -1 childIndex = -1
for (const pIndex in this.accountTreeData) { for (const pIndex in this.accountTreeData) {
@ -621,7 +649,7 @@ export default {
&-list { &-list {
flex-shrink: 0; flex-shrink: 0;
width: 350px; width: 350px;
height: 100%; height: calc(100% - 2px);
background-color: #022024; background-color: #022024;
border-color: rgb(12, 106, 102, 0.9); border-color: rgb(12, 106, 102, 0.9);
border-radius: 0; border-radius: 0;
@ -634,15 +662,23 @@ export default {
padding-left: 15px; padding-left: 15px;
background-color: #022024; background-color: #022024;
border-bottom-color: rgba(12, 235, 201, 0.3); border-bottom-color: rgba(12, 235, 201, 0.3);
position: relative;
&-title { &-title {
padding-top: 22px; padding-top: 22px;
padding-bottom: 0; padding-bottom: 0;
} }
.card-title {
height: 18px;
line-height: 18px;
margin-bottom: 11px;
}
.line { .line {
width: 70px; width: 70px;
height: 3px; height: 3px;
background-color: #0cebc9; background-color: #0cebc9;
margin-top: 10px; margin-top: 10px;
position: absolute;
bottom: -1px;
} }
} }
&-body { &-body {
@ -703,7 +739,7 @@ export default {
border: 1px solid @borderColor; border: 1px solid @borderColor;
background-color: @bgColor; background-color: @bgColor;
position: absolute; position: absolute;
top: 25px; top: 28px;
left: 2px; left: 2px;
width: 9px; width: 9px;
height: 9px; height: 9px;
@ -713,7 +749,7 @@ export default {
} }
} }
.left-bottom-border { .left-bottom-border {
height: calc(100% - 30px); height: calc(100% - 33px);
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
@ -751,14 +787,17 @@ export default {
} }
} }
&-content { &-content {
min-height: 62px; min-height: 63px;
border-top: 1px solid @borderColor; border-top: 1px solid @borderColor;
border-left: 1px solid @borderColor; border-left: 1px solid @borderColor;
padding: 6px; padding: 5px 6px 5px 18px;
background-color: @bgColor; background-color: @bgColor;
line-height: 26px; line-height: 26px;
flex: 1; flex: 1;
color: #6ebad0; color: #6ebad0;
> span {
margin-left: -6px;
}
} }
} }
} }
@ -778,6 +817,12 @@ export default {
overflow: auto; overflow: auto;
padding-right: 5px; padding-right: 5px;
} }
.ant-fullcalendar-date {
height: 127px !important;
}
.ant-fullcalendar-content {
height: 60px !important;
}
} }
} }
.search-form { .search-form {

5
src/views/system/UserList.vue
View File

@ -146,7 +146,7 @@ export default {
], ],
url: { url: {
list: '/sys/user/list', list: '/sys/user/list',
delete: '/sys/user/delete' delete: '/sys/user/deleteById'
}, },
roleOptions: [], roleOptions: [],
visible: false, visible: false,
@ -226,7 +226,8 @@ export default {
onDel() { onDel() {
if (this.selectedRowKeys && this.selectedRowKeys.length) { if (this.selectedRowKeys && this.selectedRowKeys.length) {
this.$confirm({ 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', okText: 'OK',
cancelText: 'Cancel', cancelText: 'Cancel',
onOk: () => { onOk: () => {