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) { ...@@ -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
...@@ -2,24 +2,32 @@ ...@@ -2,24 +2,32 @@
<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"
: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-tree>
</el-aside> </el-aside>
<el-main> <el-main>
<el-calendar v-loading="loading" v-model="date" class="myteam-cal"> <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"> <div @click.stop.prevent style="height: 100%; padding: 8px">
<el-row style="height: 100%;"> <el-row style="height: 100%">
<el-col :span="18"> <el-col :span="18">
<div class="solar"> <div class="solar">
{{ data.day.split('-')[1]+'-'+data.day.split('-')[2] }} {{ data.day.split("-")[1] + "-" + data.day.split("-")[2] }}
</div> </div>
</el-col> </el-col>
<!-- <el-col :span="6"> <!-- <el-col :span="6">
...@@ -31,16 +39,70 @@ ...@@ -31,16 +39,70 @@
<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"
effect="dark"
>班</el-tag
>
<el-tag
v-else-if="holidayList.indexOf(data.day) > -1"
effect="dark"
type="success"
>休</el-tag
>
</el-col> </el-col>
</el-row> </el-row>
<el-row v-for="calendarDay in calendarDayList " :key="calendarDay.theDay" @click.stop.prevent> <el-row
<el-col :span="24" v-if="calendarDay.theDay == data.day && holidayList.indexOf(data.day) ==-1"> v-for="calendarDay in calendarDayList"
<div v-for="(teamShift,index) in calendarDay.calPlanWorkunitList" :key="index" class="grid-content" :title="teamShift.workDate"> :key="calendarDay.theDay"
<el-button type="primary" v-if="teamShift.shiftName === '白班'" icon="el-icon-sunny" >{{ teamShift.workunitName }}</el-button> @click.stop.prevent
<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-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> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -54,11 +116,15 @@ ...@@ -54,11 +116,15 @@
<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,
...@@ -71,77 +137,82 @@ export default { ...@@ -71,77 +137,82 @@ export default {
filterText: null, filterText: null,
date: new Date(), date: new Date(),
teamList: [], //所有的班组 teamList: [], //所有的班组
holidayList:[],//假日 holidayList: [], //假日
workdayList:[],//工作日 workdayList: [], //工作日
selectedType:null, selectedType: null,
calendarDayList:[ calendarDayList: [],
],
teamShiftQueryParams: { teamShiftQueryParams: {
isWork: 1 isWork: 1,
}, },
queryParams: { queryParams: {
theDay: null, theDay: null,
isWork: 1 isWork: 1,
} },
} content: "",
};
}, },
watch:{ watch: {
date:{ date: {
handler(newVal,oldVal){ handler(newVal, oldVal) {
this.queryParams.theDay = newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate(); this.queryParams.theDay =
let type = '' newVal.getFullYear() +
if(this.selectRow['level'] === 2 || this.selectRow['level'] === 3){ "-" +
type = 'id' (newVal.getMonth() + 1) +
"-" +
newVal.getDate();
let type = "";
if (this.selectRow["level"] === 2 || this.selectRow["level"] === 3) {
type = "id";
} }
this.getList(type); this.getList(type);
}
}, },
filterText (val) { },
this.$refs.tree.filter(val) filterText(val) {
} this.$refs.tree.filter(val);
},
}, },
created() { created() {
// this.getList(); // this.getList();
this.getTeams(); this.getTeams();
}, },
methods:{ methods: {
// 筛选节点 // 筛选节点
filterNode(value, data) { filterNode(value, data) {
if (!value) return true; if (!value) return true;
return data.label.indexOf(value) !== -1; return data.label.indexOf(value) !== -1;
}, },
getTeams(){ getTeams() {
listAllTeam().then(response =>{ listAllTeam().then((response) => {
this.teamList = response.data; this.teamList = response.data;
if(response.data.length > 0) { if (response.data.length > 0) {
this.defaultExpandedKeys.push(response.data[0]?.id) this.defaultExpandedKeys.push(response.data[0]?.id);
} }
}); });
}, },
/** 查询节假日设置列表 */ /** 查询节假日设置列表 */
getList(type) { getList(type) {
this.loading = true; this.loading = true;
this.holidayList =[]; this.holidayList = [];
this.workdayList =[]; this.workdayList = [];
let that = this; let that = this;
const params = JSON.parse(JSON.stringify(this.queryParams)) const params = JSON.parse(JSON.stringify(this.queryParams));
if (this.teamShiftQueryParams.workunitName) { if (this.teamShiftQueryParams.workunitName) {
params.workunitName = this.teamShiftQueryParams.workunitName params.workunitName = this.teamShiftQueryParams.workunitName;
} }
if (type) { if (type) {
delete params.workunitName delete params.workunitName;
} else { } else {
delete params.workunitIds delete params.workunitIds;
params['workunitId'] = this.selectRow.id params["workunitId"] = this.selectRow.id;
} }
const fn = type ? getCalWorkunits : listCalholiday const fn = type ? getCalWorkunits : listCalholiday;
fn(params).then(response => { fn(params).then((response) => {
this.calendarDayList = response.data; this.calendarDayList = response.data;
if(response.data !=null){ if (response.data != null) {
response.data.forEach(theDay => { response.data.forEach((theDay) => {
if(theDay.holidayType =='HOLIDAY'){ if (theDay.holidayType == "HOLIDAY") {
that.holidayList.push(theDay.theDay); that.holidayList.push(theDay.theDay);
}else if(theDay.holidayType == 'WORKDAY'){ } else if (theDay.holidayType == "WORKDAY") {
that.workdayList.push(theDay.theDay); that.workdayList.push(theDay.theDay);
} }
}); });
...@@ -149,144 +220,184 @@ export default { ...@@ -149,144 +220,184 @@ export default {
} }
}); });
}, },
getGroupId (data) { async getCalWorkunitsDetail(data) {
return data.reduce((pre, {id,children})=>{ const result = await getCalWorkunitsDetailApi(data);
if(children && children.length){ if (result.code == 200) {
pre = [...pre, ...this.getGroupId(children)] this.content = result.data;
}
},
getGroupId(data) {
return data.reduce((pre, { id, children }) => {
if (children && children.length) {
pre = [...pre, ...this.getGroupId(children)];
} else { } else {
pre.push(id) pre.push(id);
} }
return pre return pre;
},[]) }, []);
}, },
//点击班组类型 //点击班组类型
onSelected(data){ onSelected(data) {
this.selectRow = data this.selectRow = data;
if(data['level'] === 4){ if (data["level"] === 4) {
this.loading = true; this.loading = true;
this.queryParams.workunitName = data['label']; this.queryParams.workunitName = data["label"];
this.queryParams.theDay = this.date.getFullYear()+'-'+(this.date.getMonth()+1)+'-'+this.date.getDate(); this.queryParams.theDay =
this.getList() this.date.getFullYear() +
} else if (data['level'] === 2 || data['level'] === 3){ "-" +
(this.date.getMonth() + 1) +
"-" +
this.date.getDate();
this.getList();
} else if (data["level"] === 2 || data["level"] === 3) {
this.loading = true; this.loading = true;
this.queryParams.workunitIds = this.getGroupId(data.children); this.queryParams.workunitIds = this.getGroupId(data.children);
this.queryParams.theDay = this.date.getFullYear()+'-'+(this.date.getMonth()+1)+'-'+this.date.getDate(); this.queryParams.theDay =
this.getList('id') this.date.getFullYear() +
"-" +
(this.date.getMonth() + 1) +
"-" +
this.date.getDate();
this.getList("id");
} }
}, },
isFestival(slotDate, slotData) { isFestival(slotDate, slotData) {
let solarDayArr = slotData.day.split('-'); let solarDayArr = slotData.day.split("-");
let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2]) let lunarDay = calendar.solar2lunar(
solarDayArr[0],
solarDayArr[1],
solarDayArr[2]
);
// 公历节日\农历节日\农历节气 // 公历节日\农历节日\农历节气
let festAndTerm = []; let festAndTerm = [];
festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival) festAndTerm.push(
festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival) lunarDay.festival == null ? "" : " " + lunarDay.festival
festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term) );
festAndTerm = festAndTerm.join('') festAndTerm.push(
lunarDay.lunarFestival == null ? "" : "" + lunarDay.lunarFestival
);
festAndTerm.push(lunarDay.Term == null ? "" : "" + lunarDay.Term);
festAndTerm = festAndTerm.join("");
return festAndTerm != '' return festAndTerm != "";
}, },
solarDate2lunar(solarDate) { solarDate2lunar(solarDate) {
var solar = solarDate.split('-') var solar = solarDate.split("-");
var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2]) var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2]);
let lunarMD = lunar.IMonthCn + lunar.IDayCn; let lunarMD = lunar.IMonthCn + lunar.IDayCn;
// 公历节日\农历节日\农历节气 // 公历节日\农历节日\农历节气
let festAndTerm = []; let festAndTerm = [];
festAndTerm.push(lunar.festival == null ? '' : ' ' + lunar.festival) festAndTerm.push(lunar.festival == null ? "" : " " + lunar.festival);
festAndTerm.push(lunar.lunarFestival == null ? '' : '' + lunar.lunarFestival) festAndTerm.push(
festAndTerm.push(lunar.Term == null ? '' : '' + lunar.Term) lunar.lunarFestival == null ? "" : "" + lunar.lunarFestival
festAndTerm = festAndTerm.join('') );
festAndTerm.push(lunar.Term == null ? "" : "" + lunar.Term);
return festAndTerm == '' ? lunarMD : festAndTerm 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
.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-radius: 0px !important;
border: none !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,
.myteam-cal .el-calendar-table__row .el-calendar-day .el-button {
cursor: text; cursor: text;
} }
.myteam-cal .el-calendar-table__row .el-calendar-day .el-button--primary:hover { .myteam-cal .el-calendar-table__row .el-calendar-day .el-button--primary:hover {
color: #FFF; color: #fff;
background-color: #0256FF; background-color: #0256ff;
border-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