Skip to content

C
confucius
Commit 5be130d2 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent e1cab3d8
Hide whitespace changes
Inline Side-by-side
Showing with 402 additions and 12 deletions
src/pages/scheduling/scheduleInfo.vue 0 → 100644
View file @ 5be130d2
<style>
.scheduMain {
height: 100%;
width: 100%;
padding: 15px;
background-color: #f2f4f7;
overflow: hidden;
}
.scheduMain .schedu_left {
width: 248px;
flex: 0 0 auto;
position: relative;
background-image: url(../../assets/images/sched_bg.png);
background-repeat: no-repeat;
background-size: 100% auto;
height: 100%;
}
.scheduMain .okr-menu-active {
color: var(--q-color-primary);
font-weight: bold;
background: #ecf1ff;
}
.mySched {
border-radius: 8px;
overflow: hidden;
height: 100%;
background-color: #fff;
}
.schedu_ImgDiv {
width: 68px;
height: 68px;
border-radius: 20px;
overflow: hidden;
margin: 75px auto 0;
}
.schedu_ImgDiv img {
width: 100%;
height: 100%;
}
.schedu_Name {
color: #fff;
font-size: 16px;
margin-top: 26px;
text-align: center;
}
.schedu_Status {
font-size: 12px;
color: #fff;
text-align: center;
margin-top: 15px;
}
.schedu_st {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
position: relative;
top: 1px;
}
.zbz {
background-color: #00DB4E;
}
.xxz {
background-color: #DBDBDB;
}
.wdk {
background-color: #FE4475;
}
.clockon_Duty {
width: 120px;
height: 34px;
background: linear-gradient(90deg, #00BDD3, #00D761);
border-radius: 10px;
margin: 100px auto 24px;
text-align: center;
line-height: 31px;
color: #fff;
font-size: 14px;
cursor: pointer;
}
.sche_daka {
font-size: 18px;
position: relative;
left: 5px;
top: 2px;
}
.schedu_jiaojie {
width: 120px;
height: 34px;
line-height: 34px;
text-align: center;
border-radius: 10px;
border: 1px solid #91AEFF;
color: #C4D4FF;
font-size: 14px;
margin: auto;
cursor: pointer;
}
.sche_rightTop {
width: 100%;
height: 80px;
background-color: #fff;
}
.schScroll {
background-color: #F6F8FA;
}
.sche_Topflex {
display: flex;
/* width: 90%; */
height: 80px;
align-items: center;
}
.Sctop_Color {
font-size: 18px;
color: #000000;
width: 246px;
text-align: center;
}
.Scotop_little {
color: #AAAAAA;
font-size: 14px;
margin-right: 15px;
}
.Scdu_benci::after {
content: "";
position: absolute;
height: 29px;
width: 2px;
background: #EBEBEB;
right: 0;
}
.sche_mid {
display: flex;
width: 100%;
justify-content: space-between;
}
.sche_midList {
width: 31.6%;
height: 300px;
background: #fff;
border-radius: 16px;
border: 1px solid #EBEBEB;
box-shadow: 0px 1px 1px 0px #E4E7FB;
overflow: hidden;
font-family: 'MicrosoftYaHei';
position: relative;
}
.Sche_Bottom {
margin: 26px 40px 0 40px;
}
.scheList_TOP {
width: 100%;
height: 107px;
border-radius: 16px;
overflow: hidden;
position: relative;
}
.scheList_TOP img {
width: 100%;
height: 100%;
}
.word_sche {
color: #fff;
font-size: 20px;
position: absolute;
top: 25px;
left: 32px;
}
.word_scheNumber {
display: inline-block;
width: 36px;
height: 36px;
color: #fff;
background-color: #FE4475;
position: absolute;
top: 30px;
left: 130px;
text-align: center;
line-height: 36px;
border-radius: 8px;
font-size: 25px;
}
.scheList_Bottom {
margin: 15px 20px 0 20px;
font-size: 14px;
color: #000000;
height: 46px;
padding-bottom: 10px;
border-bottom: 1px solid #F3F3F3;
}
.sche_Dian {
display: inline-block;
width: 6px;
height: 6px;
background-color: #6D97FF;
border-radius: 50%;
margin-right: 10px;
}
.schScroll::-webkit-scrollbar {
display: none;
}
</style>
<template>
<div class="scheduMain">
<div class="flex row mySched">
<div class="schedu_left">
<div class="schedu_ImgDiv">
<img :src="dataList.DutyManIcon" alt="" />
</div>
<div class="schedu_Name">
{{dataList.DutyManName}}
</div>
<div class="schedu_Status">
<span class="schedu_st zbz"></span>{{dataList.DutyStatusStr}}
</div>
<div class="clockon_Duty" @click="SetDutyCheck(1)" v-if="dataList.DutyStatus==1 && dataList.Status==0 ">
值班打卡<i class="iconfont icon-jiejue1 sche_daka"></i>
</div>
<div class="clockon_Duty" @click="SetDutyCheck(2)" v-if="dataList.DutyStatus==1 && dataList.Status==1 ">
值班交接<i class="iconfont icon-jiejue1 sche_daka"></i>
</div>
</div>
<div class="col scroll schScroll">
<div class="sche_rightTop">
<div class="sche_Topflex">
<div class="Sctop_Color Scdu_benci" style="position:relative;">本次值班信息</div>
<div class="Sctop_Color">
<span class="Scotop_little">校区</span>{{dataList.SchoolName}}
</div>
<div class="Sctop_Color" style="width:400px;">
<span class="Scotop_little">时间</span>
<span v-if="dataList.PlanDate">{{dataList.PlanDate.replaceAll('-','.')}}</span>
<span v-if="dataList.WeekDay">{{dataList.WeekDay.replace('星期','周')}}</span>
{{dataList.StartTime}}-{{dataList.EndTime}}
</div>
<div class="Sctop_Color">
<span class="Scotop_little">班次</span>{{dataList.ShiftName}}
</div>
</div>
</div>
<div class="Sche_Bottom">
<schedulOrder :save-obj="msg" @refreshPage="refreshPage"></schedulOrder>
<schedulVisit :save-obj="msg" ></schedulVisit>
</div>
</div>
</div>
</div>
</template>
<script>
import {
OnDuty,
saveDutyCheck, //值班打卡
} from '../../api/scheduling/schedu'
import schedulOrder from '../../components/schedul/schedul-orderlist'
import schedulVisit from '../../components/schedul/schedul-visit'
export default {
props: {},
components: {
schedulOrder,
schedulVisit
},
data() {
return {
msg: {
Id: 0,
Shift: 0,
PlanDate: "", //日期
HandoverList: [], //交接事项列表
EmergenciesList: [], //突发事项列表
WorkList: [], //工作清单列表
},
checkMsg: {
Id: 0,
Shift: 0,
Status: 0, //Status(1-值班打卡，2-交接打卡)
},
dataList: {}
}
},
created() {
if (this.$route.query.Id) {
this.msg.Id = this.$route.query.Id;
this.checkMsg.Id = this.$route.query.Id;
}
if (this.$route.query.Shift) {
this.msg.Shift = this.$route.query.Shift;
this.checkMsg.Shift = this.$route.query.Shift;
}
this.getList();
},
methods: {
//请求数据
getList() {
OnDuty(this.msg).then(res => {
if (res.Code == 1) {
this.dataList = res.Data;
this.msg.PlanDate = res.Data.PlanDate;
this.msg.HandoverList = res.Data.HandoverList;
this.msg.EmergenciesList = res.Data.EmergenciesList;
this.msg.WorkList = res.Data.WorkList;
}
})
},
//值班打卡或值班交接
SetDutyCheck(status) {
this.checkMsg.Status = status;
saveDutyCheck(this.checkMsg).then(res => {
if (res.Code == 1) {
this.getList();
this.$q.notify({
icon: 'iconfont icon-chenggong',
color: 'accent',
timeout: 2000,
message: '数据保存成功！',
position: 'top'
})
} else {
this.$q.notify({
icon: 'iconfont icon-chenggong',
color: 'accent',
timeout: 2000,
message: res.Message,
position: 'top'
})
}
})
},
//刷新父页面
refreshPage() {
this.getList();
}
},
}
</script>
src/pages/scheduling/schedulingRecord.vue
View file @ 5be130d2
...@@ -75,14 +75,19 @@ ...@@ -75,14 +75,19 @@
</div> </div>
</div> </div>
</q-td> </q-td>
<q-td v-if="col.name == 'DutyStatus'" style="padding-right:0px"> <q-td v-if="col.name == 'DutyStatusStr'" style="padding-right:0px">
<span v-if="props.row.DutyStatus==0" style="color:blue">{{props.row.DutyStatusStr}}</span> <div v-for="item in col.value">
<span v-if="props.row.DutyStatus==1" style="color:green">{{props.row.DutyStatusStr}}</span> <span v-if="item.DutyStatus==0" style="color:blue" class="border-bottom">{{item.DutyStatusStr}}</span>
<span v-if="props.row.DutyStatus==2" style="color:red">{{props.row.DutyStatusStr}}</span> <span v-if="item.DutyStatus==1" style="color:green"
class="border-bottom">{{item.DutyStatusStr}}</span>
<span v-if="item.DutyStatus==2" style="color:red" class="border-bottom">{{item.DutyStatusStr}}</span>
</div>
</q-td> </q-td>
<q-td v-else-if="col.name == 'Id'" style="width:200px;"> <q-td v-else-if="col.name == 'ViewId'" style="width:200px;">
<q-btn flat size="xs" icon="iconfont icon-View" style="font-weight:400;" class="q-mr-xs"  label="查看" <div v-for="item in col.value">
 @click=""   /> <q-btn flat size="xs" icon="iconfont icon-View" style="font-weight:400;" class="q-mr-xs"  label="查看"
 @click="GoToDutyInfo(item)"   />
</div>
</q-td> </q-td>
</template> </template>
</q-tr> </q-tr>
...@@ -148,16 +153,16 @@ ...@@ -148,16 +153,16 @@
field: row => row.PlanDetails field: row => row.PlanDetails
}, },
{ {
name: 'DutyStatus', name: 'DutyStatusStr',
label: '状态', label: '状态',
align: 'left', align: 'left',
field: 'DutyStatus', field: 'DutyStatusStr',
field: row => row.PlanDetails field: row => row.PlanDetails
}, },
{ {
name: 'Id', name: 'ViewId',
label: '操作', label: '操作',
field: 'Id' field: row => row.PlanDetails
} }
], ],
dataList: [], dataList: [],
...@@ -184,7 +189,7 @@ ...@@ -184,7 +189,7 @@
var month = nowDay.getMonth() + 1; //月 var month = nowDay.getMonth() + 1; //月
var day = nowDay.getDate(); //日 var day = nowDay.getDate(); //日
var currentDay = year + '-' + month + '-' + day; var currentDay = year + '-' + month + '-' + day;
this.msg.StartDate = currentDay; this.msg.EndDate = currentDay;
this.querySchoolList(); this.querySchoolList();
this.getEmployee(); this.getEmployee();
}, },
...@@ -242,6 +247,16 @@ ...@@ -242,6 +247,16 @@
this.msg.pageIndex = val; this.msg.pageIndex = val;
this.getList(); this.getList();
}, },
//跳转到值班详情
GoToDutyInfo(item) {
this.$router.push({
path: "/scheduling/scheduleInfo",
query: {
Id: item.PlanId,
Shift: item.Shift
}
});
}
}, },
} }
......
src/router/routes.js
View file @ 5be130d2
...@@ -692,6 +692,11 @@ const routes = [{ ...@@ -692,6 +692,11 @@ const routes = [{
component: () => component: () =>
import("pages/scheduling/scheduleBoard.vue") import("pages/scheduling/scheduleBoard.vue")
}, },
{
path: "/scheduling/scheduleInfo", //值班详情
component: () =>
import("pages/scheduling/scheduleInfo.vue")
},
{ {
path: "/test", //API测试 path: "/test", //API测试
component: () => component: () =>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment