|
@@ -11,8 +11,8 @@
|
|
|
<!-- <el-icon :size="16" style="cursor:pointer;margin-right: 5px;position:relative;top:5px" color="#409EFF" @click="handleEditTag(item)">
|
|
|
<Edit />
|
|
|
</el-icon> -->
|
|
|
- <el-tag style="margin-right: 8px" type="success" v-for="(tag, index) in item.prodTags" closable :key="index"
|
|
|
- @close="prodTagClose(index, item)">
|
|
|
+ <!-- closable @close="prodTagClose(index, item)" -->
|
|
|
+ <el-tag style="margin-right: 8px" type="success" v-for="(tag, index) in item.prodTags" :key="index">
|
|
|
{{ dictKeyValue(tag, contractTag) }}
|
|
|
</el-tag>
|
|
|
</div>
|
|
@@ -65,51 +65,33 @@
|
|
|
<div class="schedule-bottom">
|
|
|
<el-calendar v-model="today" ref="calendar">
|
|
|
<template #date-cell="{ data }">
|
|
|
- <div>
|
|
|
- <div :class="'title ' + (data.isSelected ? 'is-selected' : '')" :style="data.isSelected ? ' background-color: #eeeeee;' : ''">
|
|
|
- <span :class="data.isSelected ? 'select-title' : ''">{{ data.day.substr(8, 10) }}</span>
|
|
|
- <span style="position: absolute; right: 4px; top: 4px; font-size: 14px; color: black" v-if="judgeDay(data.day)">
|
|
|
- {{ dateList[data.day].length }}条
|
|
|
- </span>
|
|
|
+ <div style="text-align:center">
|
|
|
+ <div>
|
|
|
+ {{ data.day.substr(8, 10) }}
|
|
|
</div>
|
|
|
- <div v-if="judgeDay(data.day)">
|
|
|
- <div v-for="(item, index) in dateList[data.day]" :key="index">
|
|
|
- <el-popover placement="right" :width="400" trigger="hover">
|
|
|
- <template #reference>
|
|
|
- <div class="line-class" :style="getColor(item)">
|
|
|
- <span style="font-size: 12px; margin-left: 8px; color: black">{{ item.title }}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ <el-popover placement="left" :width="400" trigger="hover" @show="onShow(data.day)">
|
|
|
+ <template #reference>
|
|
|
+ <div v-if="isShow(data.day)">
|
|
|
+ <div style="height:5px;margin-bottom:5px;border-radius:2px" v-for="(item,index) in judgeDay(data.day)" :key="index"
|
|
|
+ :style="{ background: colorData[item]}">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div>
|
|
|
+ <div v-for="item in showData" :key="item" style="margin-bottom:20px">
|
|
|
+ <div style="display:flex">
|
|
|
+ <div>颜色:</div>
|
|
|
+ <div :style="{ background: colorData[item]}" style="width:20px;height:20px;border-radius:10px"></div>
|
|
|
+ </div>
|
|
|
<div>
|
|
|
- <el-form :model="item" label-width="80px" style="margin-top: 18px">
|
|
|
- <el-form-item label="主题:">
|
|
|
- <span>{{ item.title }}</span>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="时间:">
|
|
|
- <div>
|
|
|
- <span v-if="item.startDate">{{ moment(item.startDate.substr(5, 16), "MM-DD HH:mm:ss").format("MM月DD日 HH:mm") }}</span>
|
|
|
- <span> - </span>
|
|
|
- <span v-if="item.endDate">{{ moment(item.endDate.substr(5, 16), "MM-DD HH:mm:ss").format("MM月DD日 HH:mm") }}</span>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="颜色:">
|
|
|
- <div :style="' width: 24px; height: 24px; border-radius: 50px; margin-top: 2px; background-color: ' + item.color">
|
|
|
- <el-icon style="color: #fff; font-size: 20px; margin: 2px 0 0 2px">
|
|
|
- <Check />
|
|
|
- </el-icon>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="提醒:">
|
|
|
- <span>{{ getLabel(item.noticeType, noticeType) }}</span>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div style="border-top: 1px solid #ccc; text-align: center; padding-top: 16px">
|
|
|
- <el-button type="primary" @click="clickDetail(item)" text>查看详情</el-button>
|
|
|
- </div>
|
|
|
+ 订单号:<span v-if="rightDataObj[item]">{{rightDataObj[item]['code']}}</span>
|
|
|
</div>
|
|
|
- </el-popover>
|
|
|
+ <div>
|
|
|
+ 产品:<span v-if="rightDataObj[item]">{{rightDataObj[item]['productName']}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </el-popover>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-calendar>
|
|
@@ -173,6 +155,8 @@ const status = ref("0");
|
|
|
const today = ref(moment().format("yyyy-MM-DD"));
|
|
|
const dateList = ref({});
|
|
|
const month = ref(moment().format("yyyy年MM月"));
|
|
|
+const monthOne = ref(moment().format("yyyy-MM"));
|
|
|
+
|
|
|
const calendar = ref(null);
|
|
|
const statusData = ref([
|
|
|
{
|
|
@@ -446,6 +430,58 @@ const submitProduction = () => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+const rightData = ref([]);
|
|
|
+const rightDataObj = ref({});
|
|
|
+const colorData = ref({});
|
|
|
+let colorList = [
|
|
|
+ "#BBFF00",
|
|
|
+ "#FFFF00",
|
|
|
+ "#FFBB00",
|
|
|
+ "#FF3333",
|
|
|
+ "#D28EFF",
|
|
|
+ "#CCEEFF",
|
|
|
+ "#FFC8B4",
|
|
|
+ "#CCDDFF",
|
|
|
+ "#007799",
|
|
|
+ "#550088",
|
|
|
+ "#AAFFEE",
|
|
|
+ "#FFB3FF",
|
|
|
+ "#FFFF33",
|
|
|
+];
|
|
|
+const getRightData = () => {
|
|
|
+ proxy
|
|
|
+ .post("/produceOrder/schedulingList", { beginDate: monthOne.value })
|
|
|
+ .then(
|
|
|
+ (res) => {
|
|
|
+ rightDataObj.value = {};
|
|
|
+ rightData.value = res.map((x, index) => ({
|
|
|
+ ...x,
|
|
|
+ produceTimeOne: x.produceTime,
|
|
|
+ produceTime: x.produceTime.substr(0, 10),
|
|
|
+ deliveryPeriod: x.deliveryPeriod.substr(0, 10),
|
|
|
+ }));
|
|
|
+
|
|
|
+ for (let i = 0; i < res.length; i++) {
|
|
|
+ const ele = res[i];
|
|
|
+ rightDataObj.value[ele.id] = ele;
|
|
|
+ if (i <= 19) {
|
|
|
+ colorData.value[ele.id] = colorList[i];
|
|
|
+ } else {
|
|
|
+ colorData.value[ele.id] = colorList[19 - i] || colorList[0];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+ );
|
|
|
+};
|
|
|
+getRightData();
|
|
|
+
|
|
|
+const getBackGround = (id) => {
|
|
|
+ return { background: colorData.value[id] };
|
|
|
+};
|
|
|
+
|
|
|
const prodTagClose = (index, row) => {
|
|
|
row.prodTags.splice(index, 1);
|
|
|
proxy
|
|
@@ -459,31 +495,55 @@ const prodTagClose = (index, row) => {
|
|
|
};
|
|
|
|
|
|
const clickToday = () => {
|
|
|
- console.log("clickToday", sourceList.value.pagination);
|
|
|
today.value = moment().format("yyyy-MM-DD");
|
|
|
month.value = moment().format("yyyy年MM月");
|
|
|
+ monthOne.value = moment().format("yyyy-MM");
|
|
|
+ getRightData();
|
|
|
};
|
|
|
-const judgeDay = (day) => {
|
|
|
- return dateList.value[day] && dateList.value[day].length > 0;
|
|
|
-};
|
|
|
-const getColor = (item) => {
|
|
|
- let text = "background-color: " + item.color + "6b;";
|
|
|
- if (item.startDate && item.date === item.startDate.substr(0, 10)) {
|
|
|
- text += " border-left: 5px solid " + item.color;
|
|
|
+
|
|
|
+const isShow = (day) => {
|
|
|
+ let nowDay = new Date(day + " 23:59:59").getTime();
|
|
|
+ let flag = false;
|
|
|
+ for (let i = 0; i < rightData.value.length; i++) {
|
|
|
+ const e = rightData.value[i];
|
|
|
+ let startDay = new Date(e.produceTime).getTime();
|
|
|
+ let endDay = new Date(e.deliveryPeriod + " 23:59:59").getTime();
|
|
|
+ if (nowDay >= startDay && nowDay <= endDay) {
|
|
|
+ flag = true;
|
|
|
+ break;
|
|
|
+ }
|
|
|
}
|
|
|
- return text;
|
|
|
+ return flag;
|
|
|
};
|
|
|
|
|
|
-const getLabel = (val, list) => {
|
|
|
- let text = "";
|
|
|
- if (list && list.length > 0) {
|
|
|
- let data = list.filter((item) => item.value == val);
|
|
|
- if (data && data.length > 0) {
|
|
|
- text = data[0].label;
|
|
|
+const judgeDay = (day) => {
|
|
|
+ // return dateList.value[day] && dateList.value[day].length > 0;
|
|
|
+ let nowDay = new Date(day + " 23:59:59").getTime();
|
|
|
+ let rows = [];
|
|
|
+ for (let i = 0; i < rightData.value.length; i++) {
|
|
|
+ const e = rightData.value[i];
|
|
|
+ let startDay = new Date(e.produceTime).getTime();
|
|
|
+ let endDay = new Date(e.deliveryPeriod + " 23:59:59").getTime();
|
|
|
+ if (nowDay >= startDay && nowDay <= endDay) {
|
|
|
+ rows.push(e.id);
|
|
|
}
|
|
|
}
|
|
|
- return text;
|
|
|
+ return rows;
|
|
|
+};
|
|
|
+
|
|
|
+const showData = ref([]);
|
|
|
+const onShow = (day) => {
|
|
|
+ let rows = judgeDay(day);
|
|
|
+ showData.value = rows;
|
|
|
+};
|
|
|
+
|
|
|
+const getData = (id, att) => {
|
|
|
+ const current = rightData.value.find((x) => x.id == id);
|
|
|
+ if (current && current[att]) {
|
|
|
+ return current[att];
|
|
|
+ }
|
|
|
};
|
|
|
+
|
|
|
const selectDate = (val) => {
|
|
|
calendar.value.selectDate(val);
|
|
|
};
|
|
@@ -492,17 +552,17 @@ const prevMonth = () => {
|
|
|
month.value = moment(
|
|
|
moment(month.value, "yyyy年MM月").add(-1, "month").calendar()
|
|
|
).format("yyyy年MM月");
|
|
|
- console.log("prevMonth", month.value);
|
|
|
+ monthOne.value = moment(moment(month.value, "yyyy年MM月")).format("yyyy-MM");
|
|
|
selectDate("prev-month");
|
|
|
- // getList();
|
|
|
+ getRightData();
|
|
|
};
|
|
|
const nextMonth = () => {
|
|
|
month.value = moment(
|
|
|
moment(month.value, "yyyy年MM月").add(+1, "month").calendar()
|
|
|
).format("yyyy年MM月");
|
|
|
- console.log("nextMonth", month.value);
|
|
|
+ monthOne.value = moment(moment(month.value, "yyyy年MM月")).format("yyyy-MM");
|
|
|
selectDate("next-month");
|
|
|
- // getList();
|
|
|
+ getRightData();
|
|
|
};
|
|
|
</script>
|
|
|
|
|
@@ -553,4 +613,10 @@ const nextMonth = () => {
|
|
|
::v-deep(.el-calendar__body) {
|
|
|
padding: 0;
|
|
|
}
|
|
|
+::v-deep(.el-calendar-table .el-calendar-day) {
|
|
|
+ // padding: 0;
|
|
|
+ min-height: 50px;
|
|
|
+ height: calc((100vh - 100px - 20px - 83px - 95px) / 5);
|
|
|
+ overflow-y: hidden;
|
|
|
+}
|
|
|
</style>
|