Skip to content

M
mes-ui
Commit 3d75d4ee authored by tanjunxin's avatar tanjunxin
Browse files
Options

fix: 排班日历悬停显示排班情况逻辑修改

parent 329ca749
Show whitespace changes
Inline Side-by-side
Showing with 388 additions and 267 deletions
src/api/mes/cal/calholiday.js
View file @ 3d75d4ee
......@@ -26,6 +26,15 @@ export function getCalWorkunits(query) {
});
}
// 查询当前工作日的具体时间
export function getCalWorkunitsDetailApi(query) {
return request({
url: "/mes/cal/calendar/getCalWorkunitsDetail",
method: "post",
data: query
});
}
// 查询上班数据工作单元列表
export function listItem(query) {
return request({
......@@ -68,3 +77,5 @@ export function delCalholiday(holidayId) {
method: 'delete'
})
}
src/views/mes/cal/calendar/team.vue
View file @ 3d75d4ee
......@@ -2,24 +2,32 @@
<div class="app-container">
<el-container class="el-container-cal">
<el-aside width="200px" class="el-aside-cal">
<el-input
placeholder="请输入车间名称"
v-model="filterText">
</el-input>
<el-tree :data="teamList" :props="defaultProps" :expand-on-click-node="false" class="el-tree-pro" highlight-current node-key="id"
:filter-node-method="filterNode" ref="tree" :default-expanded-keys="defaultExpandedKeys" @node-click="onSelected" >
<span slot-scope="{ data }" :title="data.label"
>{{ data.label }}</span>
<el-input placeholder="请输入车间名称" v-model="filterText"> </el-input>
<el-tree
:data="teamList"
:props="defaultProps"
:expand-on-click-node="false"
class="el-tree-pro"
highlight-current
node-key="id"
:filter-node-method="filterNode"
ref="tree"
:default-expanded-keys="defaultExpandedKeys"
@node-click="onSelected"
>
<span slot-scope="{ data }" :title="data.label">{{
data.label
}}</span>
</el-tree>
</el-aside>
<el-main>
<el-calendar v-loading="loading" v-model="date" class="myteam-cal">
<template slot="dateCell" slot-scope="{date, data }">
<template slot="dateCell" slot-scope="{ date, data }">
<div @click.stop.prevent style="height: 100%; padding: 8px">
<el-row style="height: 100%;">
<el-row style="height: 100%">
<el-col :span="18">
<div class="solar">
{{ data.day.split('-')[1]+'-'+data.day.split('-')[2] }}
{{ data.day.split("-")[1] + "-" + data.day.split("-")[2] }}
</div>
</el-col>
<!-- <el-col :span="6">
......@@ -31,16 +39,70 @@
<div class="lunar" :class="{ festival : isFestival(date, data) }">{{ solarDate2lunar(data.day) }}</div>
</el-col> -->
<el-col :span="6">
<el-tag v-if="workdayList.indexOf(data.day)> -1" effect="dark">班</el-tag>
<el-tag v-else-if="holidayList.indexOf(data.day) > -1" effect="dark" type="success">休</el-tag>
<el-tag
v-if="workdayList.indexOf(data.day) > -1"
effect="dark"
>班</el-tag
>
<el-tag
v-else-if="holidayList.indexOf(data.day) > -1"
effect="dark"
type="success"
>休</el-tag
>
</el-col>
</el-row>
<el-row v-for="calendarDay in calendarDayList " :key="calendarDay.theDay" @click.stop.prevent>
<el-col :span="24" v-if="calendarDay.theDay == data.day && holidayList.indexOf(data.day) ==-1">
<div v-for="(teamShift,index) in calendarDay.calPlanWorkunitList" :key="index" class="grid-content" :title="teamShift.workDate">
<el-button type="primary" v-if="teamShift.shiftName === '白班'" icon="el-icon-sunny" >{{ teamShift.workunitName }}</el-button>
<el-button type="success" v-else-if="teamShift.shiftName === '中班'" icon="el-icon-sunrise" >{{ teamShift.workunitName }}</el-button>
<el-button type="warning" v-else-if="teamShift.shiftName === '夜班'" icon="el-icon-moon" >{{ teamShift.workunitName }}</el-button>
<el-row
v-for="calendarDay in calendarDayList"
:key="calendarDay.theDay"
@click.stop.prevent
>
<el-col
:span="24"
v-if="
calendarDay.theDay == data.day &&
holidayList.indexOf(data.day) == -1
"
>
<div
v-for="(
teamShift, index
) in calendarDay.calPlanWorkunitList"
:key="index"
class="grid-content"
>
<el-popover
ref="popoverRef"
placement="top"
width="320"
trigger="focus"
@show="handleShow(teamShift)"
>
<span
v-for="(item, index) in content"
:key="index"
>{{ item }}<br></span>
<div slot="reference">
<el-button
type="primary"
v-if="teamShift.shiftName === '白班'"
icon="el-icon-sunny"
>{{ teamShift.workunitName }}</el-button
>
<el-button
type="success"
v-else-if="teamShift.shiftName === '中班'"
icon="el-icon-sunrise"
>{{ teamShift.workunitName }}</el-button
>
<el-button
type="warning"
v-else-if="teamShift.shiftName === '夜班'"
icon="el-icon-moon"
>{{ teamShift.workunitName }}</el-button
>
</div>
</el-popover>
</div>
</el-col>
</el-row>
......@@ -54,11 +116,15 @@
<script>
import { listAllTeam } from "@/api/mes/cal/team";
import { listCalholiday, getCalWorkunits } from "@/api/mes/cal/calholiday";
import calendar from '@/utils/calendar';
import {
listCalholiday,
getCalWorkunits,
getCalWorkunitsDetailApi,
} from "@/api/mes/cal/calholiday";
import calendar from "@/utils/calendar";
export default {
name: 'TeamView',
data(){
name: "TeamView",
data() {
return {
// 遮罩层
loading: false,
......@@ -71,77 +137,82 @@ export default {
filterText: null,
date: new Date(),
teamList: [], //所有的班组
holidayList:[],//假日
workdayList:[],//工作日
selectedType:null,
calendarDayList:[
],
holidayList: [], //假日
workdayList: [], //工作日
selectedType: null,
calendarDayList: [],
teamShiftQueryParams: {
isWork: 1
isWork: 1,
},
queryParams: {
theDay: null,
isWork: 1
}
}
isWork: 1,
},
content: "",
};
},
watch:{
date:{
handler(newVal,oldVal){
this.queryParams.theDay = newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate();
let type = ''
if(this.selectRow['level'] === 2 || this.selectRow['level'] === 3){
type = 'id'
watch: {
date: {
handler(newVal, oldVal) {
this.queryParams.theDay =
newVal.getFullYear() +
"-" +
(newVal.getMonth() + 1) +
"-" +
newVal.getDate();
let type = "";
if (this.selectRow["level"] === 2 || this.selectRow["level"] === 3) {
type = "id";
}
this.getList(type);
}
},
filterText (val) {
this.$refs.tree.filter(val)
}
},
filterText(val) {
this.$refs.tree.filter(val);
},
},
created() {
// this.getList();
this.getTeams();
},
methods:{
methods: {
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
getTeams(){
listAllTeam().then(response =>{
getTeams() {
listAllTeam().then((response) => {
this.teamList = response.data;
if(response.data.length > 0) {
this.defaultExpandedKeys.push(response.data[0]?.id)
if (response.data.length > 0) {
this.defaultExpandedKeys.push(response.data[0]?.id);
}
});
},
/** 查询节假日设置列表 */
getList(type) {
this.loading = true;
this.holidayList =[];
this.workdayList =[];
this.holidayList = [];
this.workdayList = [];
let that = this;
const params = JSON.parse(JSON.stringify(this.queryParams))
const params = JSON.parse(JSON.stringify(this.queryParams));
if (this.teamShiftQueryParams.workunitName) {
params.workunitName = this.teamShiftQueryParams.workunitName
params.workunitName = this.teamShiftQueryParams.workunitName;
}
if (type) {
delete params.workunitName
delete params.workunitName;
} else {
delete params.workunitIds
params['workunitId'] = this.selectRow.id
delete params.workunitIds;
params["workunitId"] = this.selectRow.id;
}
const fn = type ? getCalWorkunits : listCalholiday
fn(params).then(response => {
const fn = type ? getCalWorkunits : listCalholiday;
fn(params).then((response) => {
this.calendarDayList = response.data;
if(response.data !=null){
response.data.forEach(theDay => {
if(theDay.holidayType =='HOLIDAY'){
if (response.data != null) {
response.data.forEach((theDay) => {
if (theDay.holidayType == "HOLIDAY") {
that.holidayList.push(theDay.theDay);
}else if(theDay.holidayType == 'WORKDAY'){
} else if (theDay.holidayType == "WORKDAY") {
that.workdayList.push(theDay.theDay);
}
});
......@@ -149,144 +220,184 @@ export default {
}
});
},
getGroupId (data) {
return data.reduce((pre, {id,children})=>{
if(children && children.length){
pre = [...pre, ...this.getGroupId(children)]
async getCalWorkunitsDetail(data) {
const result = await getCalWorkunitsDetailApi(data);
if (result.code == 200) {
this.content = result.data;
}
},
getGroupId(data) {
return data.reduce((pre, { id, children }) => {
if (children && children.length) {
pre = [...pre, ...this.getGroupId(children)];
} else {
pre.push(id)
pre.push(id);
}
return pre
},[])
return pre;
}, []);
},
//点击班组类型
onSelected(data){
this.selectRow = data
if(data['level'] === 4){
onSelected(data) {
this.selectRow = data;
if (data["level"] === 4) {
this.loading = true;
this.queryParams.workunitName = data['label'];
this.queryParams.theDay = this.date.getFullYear()+'-'+(this.date.getMonth()+1)+'-'+this.date.getDate();
this.getList()
} else if (data['level'] === 2 || data['level'] === 3){
this.queryParams.workunitName = data["label"];
this.queryParams.theDay =
this.date.getFullYear() +
"-" +
(this.date.getMonth() + 1) +
"-" +
this.date.getDate();
this.getList();
} else if (data["level"] === 2 || data["level"] === 3) {
this.loading = true;
this.queryParams.workunitIds = this.getGroupId(data.children);
this.queryParams.theDay = this.date.getFullYear()+'-'+(this.date.getMonth()+1)+'-'+this.date.getDate();
this.getList('id')
this.queryParams.theDay =
this.date.getFullYear() +
"-" +
(this.date.getMonth() + 1) +
"-" +
this.date.getDate();
this.getList("id");
}
},
isFestival(slotDate, slotData) {
let solarDayArr = slotData.day.split('-');
let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
let solarDayArr = slotData.day.split("-");
let lunarDay = calendar.solar2lunar(
solarDayArr[0],
solarDayArr[1],
solarDayArr[2]
);
// 公历节日\农历节日\农历节气
let festAndTerm = [];
festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
festAndTerm = festAndTerm.join('')
festAndTerm.push(
lunarDay.festival == null ? "" : " " + lunarDay.festival
);
festAndTerm.push(
lunarDay.lunarFestival == null ? "" : "" + lunarDay.lunarFestival
);
festAndTerm.push(lunarDay.Term == null ? "" : "" + lunarDay.Term);
festAndTerm = festAndTerm.join("");
return festAndTerm != ''
return festAndTerm != "";
},
solarDate2lunar(solarDate) {
var solar = solarDate.split('-')
var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2])
var solar = solarDate.split("-");
var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2]);
let lunarMD = lunar.IMonthCn + lunar.IDayCn;
// 公历节日\农历节日\农历节气
let festAndTerm = [];
festAndTerm.push(lunar.festival == null ? '' : ' ' + lunar.festival)
festAndTerm.push(lunar.lunarFestival == null ? '' : '' + lunar.lunarFestival)
festAndTerm.push(lunar.Term == null ? '' : '' + lunar.Term)
festAndTerm = festAndTerm.join('')
return festAndTerm == '' ? lunarMD : festAndTerm
festAndTerm.push(lunar.festival == null ? "" : " " + lunar.festival);
festAndTerm.push(
lunar.lunarFestival == null ? "" : "" + lunar.lunarFestival
);
festAndTerm.push(lunar.Term == null ? "" : "" + lunar.Term);
festAndTerm = festAndTerm.join("");
}
}
}
return festAndTerm == "" ? lunarMD : festAndTerm;
},
handleShow(row) {
this.content = [];
const params = {
shiftName: row.shiftName,
workunitId: row.workunitId,
theDay: row.theDay,
};
this.getCalWorkunitsDetail(params);
},
},
};
</script>
<style>
.el-aside-cal {
.el-aside-cal {
max-height: 700px;
padding: 0;
}
.el-aside-cal .el-tree-node__content span {
}
.el-aside-cal .el-tree-node__content span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.el-aside-cal .el-tree {
}
.el-aside-cal .el-tree {
max-height: calc(700px - 46px);
overflow: auto;
padding-top: 10px;
}
.grid-content{
}
.grid-content {
padding: 5px 0;
}
}
.el-group-list.el-radio-group{
.el-group-list.el-radio-group {
display: flex;
flex-direction: column;
align-items:stretch;
}
align-items: stretch;
}
.el-group-list.el-radio-group .el-radio-button:first-child .el-radio-button__inner,
.el-group-list.el-radio-group .el-radio-button:last-child .el-radio-button__inner,
.el-group-list.el-radio-group .el-radio-button:first-child .el-radio-button__inner,
.el-group-list.el-radio-group .el-radio-button__inner
{
.el-group-list.el-radio-group
.el-radio-button:first-child
.el-radio-button__inner,
.el-group-list.el-radio-group
.el-radio-button:last-child
.el-radio-button__inner,
.el-group-list.el-radio-group
.el-radio-button:first-child
.el-radio-button__inner,
.el-group-list.el-radio-group .el-radio-button__inner {
border-radius: 0px !important;
border: none !important;
}
}
.el-group-list.el-radio-group .el-radio-button{
border-bottom: 1px solid #F7F7F7 !important;
}
.el-group-list.el-radio-group .el-radio-button {
border-bottom: 1px solid #f7f7f7 !important;
}
.el-group-list.el-radio-group{
.el-group-list.el-radio-group {
border: 1px solid #dcdfe6;
}
}
.el-group-list.el-radio-group > label > span{
.el-group-list.el-radio-group > label > span {
width: 100%;
text-align: left;
padding-left: 20px;
}
/**本月周末设置为红色*/
.el-calendar-table .current:nth-last-child(-n+2) .solar {
}
/**本月周末设置为红色*/
.el-calendar-table .current:nth-last-child(-n + 2) .solar {
color: red;
font-size: small;
}
/**本月农历设置为灰色*/
.el-calendar-table .current .lunar {
}
/**本月农历设置为灰色*/
.el-calendar-table .current .lunar {
color: #606266;
font-size: small;
}
/**本月农历节日设置为红色*/
.el-calendar-table .current .lunar.festival {
}
/**本月农历节日设置为红色*/
.el-calendar-table .current .lunar.festival {
color: green;
font-size: small;
}
/**节假日背景设置为绿色 */
.el-calendar-table .holiday {
background-color: #88E325;
}
.myteam-cal .el-calendar__body {
}
/**节假日背景设置为绿色 */
.el-calendar-table .holiday {
background-color: #88e325;
}
.myteam-cal .el-calendar__body {
pointer-events: none;
}
.myteam-cal .el-calendar-table .el-calendar-day {
}
.myteam-cal .el-calendar-table .el-calendar-day {
padding: 0px;
}
.myteam-cal .el-calendar-table__row .current .grid-content {
}
.myteam-cal .el-calendar-table__row .current .grid-content {
pointer-events: auto;
cursor: text;
}
.myteam-cal .el-calendar-table__row .el-calendar-day div, .myteam-cal .el-calendar-table__row .el-calendar-day .el-button {
}
.myteam-cal .el-calendar-table__row .el-calendar-day div,
.myteam-cal .el-calendar-table__row .el-calendar-day .el-button {
cursor: text;
}
.myteam-cal .el-calendar-table__row .el-calendar-day .el-button--primary:hover {
color: #FFF;
background-color: #0256FF;
border-color: #0256FF;
}
}
.myteam-cal .el-calendar-table__row .el-calendar-day .el-button--primary:hover {
color: #fff;
background-color: #0256ff;
border-color: #0256ff;
}
</style>
src/views/mes/tm/toolrequestuse/index.vue
View file @ 3d75d4ee
......@@ -345,7 +345,6 @@
@click="$refs['selectSnRef'].showFlag = true, currentInfo = scope.row"
></el-button>
</el-input>
</template>
</el-table-column>
<el-table-column label="领用位置" prop="location" />
......
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