WIP: 绘制Scheduling页面
This commit is contained in:
parent
5d59dbeff1
commit
f816e78581
BIN
src/assets/images/global/export.png
Normal file
BIN
src/assets/images/global/export.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/images/global/import.png
Normal file
BIN
src/assets/images/global/import.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/images/system/del-active.png
Normal file
BIN
src/assets/images/system/del-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/images/system/del-normal.png
Normal file
BIN
src/assets/images/system/del-normal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/images/system/transfer-left.png
Normal file
BIN
src/assets/images/system/transfer-left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/system/transfer-right.png
Normal file
BIN
src/assets/images/system/transfer-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -23,7 +23,7 @@ router.beforeEach((to, from, next) => {
|
|||
//update-end---author:scott ---date::2022-10-13 for：[jeecg-boot/issues/4091]多级路由缓存问题 #4091--------------
|
||||
|
||||
|
||||
NProgress.start() // start progress bar
|
||||
// NProgress.start() // start progress bar
|
||||
|
||||
if (Vue.ls.get(ACCESS_TOKEN)) {
|
||||
/* has token */
|
||||
|
|
|
|||
448
src/views/system/Scheduling.vue
Normal file
448
src/views/system/Scheduling.vue
Normal file
|
|
@ -0,0 +1,448 @@
|
|||
<template>
|
||||
<div class="scheduling">
|
||||
<!-- 左侧日程列表 -->
|
||||
<a-card class="scheduling-list">
|
||||
<!-- 标题 -->
|
||||
<template slot="title">
|
||||
Scheduling
|
||||
<div class="line"></div>
|
||||
</template>
|
||||
<!-- 标题结束 -->
|
||||
<!-- 内容 -->
|
||||
<div class="scheduling-list-content">
|
||||
<div class="scheduling-list-item" v-for="item of [1, 2, 3, 4]" :key="item">
|
||||
<h4 class="title">
|
||||
fanyq
|
||||
<a class="del" @click="onDel(item)"></a>
|
||||
</h4>
|
||||
<div class="scheduling-list-item-container">
|
||||
<!-- 左侧边框 -->
|
||||
<div class="left-border">
|
||||
<div class="left-top-border">
|
||||
<div class="left-top-corner"></div>
|
||||
</div>
|
||||
<div class="left-bottom-border"></div>
|
||||
</div>
|
||||
<!-- 左侧边框结束 -->
|
||||
<div class="scheduling-list-item-content">
|
||||
ARP01、ARP02、ARP03、ARP04、ARP05、 ARP06、ARP07、ARP08
|
||||
</div>
|
||||
<!-- 右侧边框 -->
|
||||
<div class="right-border">
|
||||
<div class="right-top-border"></div>
|
||||
<div class="right-bottom-border"></div>
|
||||
</div>
|
||||
<!-- 右侧边框结束 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 内容结束 -->
|
||||
</a-card>
|
||||
<div class="scheduling-calendar">
|
||||
<!-- 日历 -->
|
||||
<a-calendar v-model="currentMonth">
|
||||
<template slot="headerRender">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-form">
|
||||
<a-row>
|
||||
<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"></a-month-picker>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</a-col>
|
||||
<a-space class="btn-group">
|
||||
<a-button @click="onAdd" type="primary">
|
||||
<img src="@/assets/images/global/add.png" alt="" />
|
||||
Add
|
||||
</a-button>
|
||||
<a-button @click="onEdit" type="primary">
|
||||
<img src="@/assets/images/global/edit.png" alt="" />
|
||||
Edit
|
||||
</a-button>
|
||||
<a-button @click="onDel" type="primary">
|
||||
<img src="@/assets/images/global/import.png" alt="" />
|
||||
Import
|
||||
</a-button>
|
||||
<a-button @click="onDel" type="primary">
|
||||
<img src="@/assets/images/global/export.png" alt="" />
|
||||
Export
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-row>
|
||||
</div>
|
||||
<!-- 搜索栏结束 -->
|
||||
</template>
|
||||
<!-- 日历内部内容 -->
|
||||
<template slot="dateCellRender">
|
||||
<div class="scheduling-calendar-content">
|
||||
<div class="item" v-for="item in [1, 2, 3, 4, 5]" :key="item">
|
||||
liq (5)
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 日历内部内容 -->
|
||||
</a-calendar>
|
||||
<!-- 日历结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 增加/编辑排班弹窗 -->
|
||||
<custom-modal :title="isAdd ? 'Add' : 'Edit'" :width="845" v-model="visible" :okHandler="submit">
|
||||
<a-transfer
|
||||
:data-source="[{ key: '1', title: '标题', description: '描述' }]"
|
||||
:render="item => item.title"
|
||||
:operations="['Assign', 'Remove']"
|
||||
:titles="['Particulate Station', 'Roster personnel']"
|
||||
:show-select-all="false"
|
||||
>
|
||||
<template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }">
|
||||
<a-tree
|
||||
v-if="direction === 'left'"
|
||||
blockNode
|
||||
checkable
|
||||
checkStrictly
|
||||
defaultExpandAll
|
||||
:checkedKeys="[...selectedKeys, ...targetKeys]"
|
||||
:treeData="treeData"
|
||||
@check="
|
||||
(_, props) => {
|
||||
onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
|
||||
}
|
||||
"
|
||||
@select="
|
||||
(_, props) => {
|
||||
onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
|
||||
}
|
||||
"
|
||||
>
|
||||
<a-icon slot="switcherIcon" type="down" />
|
||||
</a-tree>
|
||||
<a-tree
|
||||
v-if="direction === 'right'"
|
||||
blockNode
|
||||
checkable
|
||||
checkStrictly
|
||||
defaultExpandAll
|
||||
:checkedKeys="[...selectedKeys, ...targetKeys]"
|
||||
:treeData="treeData"
|
||||
/>
|
||||
</template>
|
||||
</a-transfer>
|
||||
</custom-modal>
|
||||
<!-- 增加/编辑排班弹窗结束 -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FormMixin from '@/mixins/FormMixin'
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
mixins: [FormMixin],
|
||||
data() {
|
||||
return {
|
||||
currentMonth: moment(),
|
||||
form: {},
|
||||
visible: true,
|
||||
|
||||
treeData: [
|
||||
{ key: '0-0', title: '0-0' },
|
||||
{
|
||||
key: '0-1',
|
||||
title: '0-1',
|
||||
children: [
|
||||
{ key: '0-1-0', title: '0-1-0' },
|
||||
{ key: '0-1-1', title: '0-1-1' }
|
||||
]
|
||||
},
|
||||
{ key: '0-2', title: '0-3' }
|
||||
],
|
||||
selectedKeys: [],
|
||||
targetKeys: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取该月日程列表
|
||||
async getList() {},
|
||||
|
||||
// 左侧删除某一天的安排
|
||||
onDel(item) {
|
||||
console.log('%c [ 删除 ]-51', 'font-size:13px; background:pink; color:#bf2c9f;', item)
|
||||
},
|
||||
|
||||
onAdd() {
|
||||
this.isAdd = true
|
||||
this.visible = true
|
||||
},
|
||||
|
||||
onEdit() {
|
||||
this.isAdd = false
|
||||
this.visible = true
|
||||
},
|
||||
|
||||
onImport() {
|
||||
console.log('%c [ 新增 ]-88', 'font-size:13px; background:pink; color:#bf2c9f;')
|
||||
},
|
||||
|
||||
onExport() {
|
||||
console.log('%c [ 新增 ]-88', 'font-size:13px; background:pink; color:#bf2c9f;')
|
||||
},
|
||||
|
||||
isChecked(selectedKeys, eventKey) {
|
||||
return selectedKeys.indexOf(eventKey) !== -1
|
||||
},
|
||||
onChecked(_, e, checkedKeys, itemSelect) {
|
||||
const { eventKey } = e.node
|
||||
itemSelect(eventKey, !this.isChecked(checkedKeys, eventKey))
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentMonth() {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.scheduling {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
&-list {
|
||||
flex-shrink: 0;
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
background-color: #022024;
|
||||
border-color: rgb(12, 106, 102, 0.9);
|
||||
border-radius: 0;
|
||||
::v-deep {
|
||||
.ant-card {
|
||||
&-head {
|
||||
font-family: MicrogrammaD-MediExte;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding-left: 15px;
|
||||
background-color: #022024;
|
||||
border-bottom-color: rgba(12, 235, 201, 0.3);
|
||||
&-title {
|
||||
padding-top: 22px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.line {
|
||||
width: 70px;
|
||||
height: 3px;
|
||||
background-color: #0cebc9;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
&-body {
|
||||
height: calc(100% - 66px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
padding: 0 12px;
|
||||
}
|
||||
&-item {
|
||||
margin-top: 15px;
|
||||
.title {
|
||||
font-family: Aria;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
position: relative;
|
||||
.del {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 16px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: url(~@/assets/images/system/del-normal.png);
|
||||
background-size: cover;
|
||||
&:hover {
|
||||
background-image: url(~@/assets/images/system/del-active.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
@borderColor: #0a544e;
|
||||
@borderRadius: 4px;
|
||||
@bgColor: #03353f;
|
||||
&-container {
|
||||
border-bottom: 1px solid @borderColor;
|
||||
border-bottom-left-radius: @borderRadius;
|
||||
border-bottom-right-radius: @borderRadius;
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
.left-border {
|
||||
width: 6px;
|
||||
position: relative;
|
||||
.left-top-border {
|
||||
position: relative;
|
||||
.left-top-corner {
|
||||
border: 1px solid @borderColor;
|
||||
background-color: @bgColor;
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 2px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
transform: rotate(45deg);
|
||||
border-top: none;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
.left-bottom-border {
|
||||
height: calc(100% - 30px);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 7px;
|
||||
background-color: @bgColor;
|
||||
border-left: 1px solid @borderColor;
|
||||
border-bottom-left-radius: @borderRadius;
|
||||
}
|
||||
}
|
||||
.right-border {
|
||||
width: 14px;
|
||||
position: relative;
|
||||
.right-top-border {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid transparent;
|
||||
border-top-color: @borderColor;
|
||||
transform: rotate(45deg);
|
||||
background-color: @bgColor;
|
||||
}
|
||||
|
||||
.right-bottom-border {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 14px);
|
||||
border-right: 1px solid @borderColor;
|
||||
border-bottom-right-radius: @borderRadius;
|
||||
background-color: @bgColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
border-top: 1px solid @borderColor;
|
||||
border-left: 1px solid @borderColor;
|
||||
padding: 6px;
|
||||
background-color: @bgColor;
|
||||
line-height: 26px;
|
||||
flex: 1;
|
||||
color: #6ebad0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 右侧日历
|
||||
&-calendar {
|
||||
overflow: auto;
|
||||
margin-left: 20px;
|
||||
padding-right: 10px;
|
||||
.search-form {
|
||||
padding: 10px;
|
||||
border: 1px solid #416f7f;
|
||||
border-bottom: 0;
|
||||
&-form {
|
||||
.ant-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.btn-group {
|
||||
float: right;
|
||||
height: 40px;
|
||||
img {
|
||||
margin-right: 12px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
padding: 10px;
|
||||
.item {
|
||||
font-family: Arial;
|
||||
font-size: 14px;
|
||||
color: #00fdd3;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
.ant-transfer {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&-list {
|
||||
width: 282px;
|
||||
height: 374px;
|
||||
&-header {
|
||||
height: 37px;
|
||||
&-selected {
|
||||
span:first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&-title {
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
&-item {
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-operation {
|
||||
.ant-btn {
|
||||
width: 92px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
.anticon {
|
||||
display: none;
|
||||
}
|
||||
span {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:first-child {
|
||||
margin-bottom: 52px;
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-left: 13px;
|
||||
content: '';
|
||||
width: 18px;
|
||||
height: 10px;
|
||||
background: url(~@/assets/images/system/transfer-right.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
content: '';
|
||||
width: 18px;
|
||||
height: 10px;
|
||||
background: url(~@/assets/images/system/transfer-left.png) no-repeat;
|
||||
background-size: contain;
|
||||
position: static;
|
||||
opacity: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user