Skip to content

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

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

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