安装拖拽插件
npm install vuedraggable
<template>
<!--排产计划-->
<div class="app-container">
<div class="mainbox">
<div class="table-container table-fullscreen">
<div class="title-name">
<div class="sign"></div>
<div class="text">创建排产计划</div>
</div>
<!-- 日期选择 -->
<div class="date-box">
<div class="btn-box">
<el-button @click="getPreviousWeekDates">上一周</el-button>
<div class="date"
v-if="nowDate[0]&&nowDate[6]">{{nowDate[0].nyr}} — {{nowDate[6].nyr}}</div>
<el-button @click="getNextWeekDates">下一周</el-button>
</div>
<div class="save-box">
<el-button>返回</el-button>
<el-button type="primary">保存</el-button>
</div>
</div>
<!-- 图例 -->
<div class="legend-box">
<div class="single-box">
<div class="single"
v-for="item in legendList"
:key="item.id">
<div class="round"
:style="{backgroundColor:item.color}"
@click="changeClick(item)"><span v-if="item.dxFlag">✔</span></div>
<div class="zname">{{item.name}}</div>
</div>
</div>
<div class="status-box">
状态：待提交
</div>
</div>
<!-- 表格 -->
<div class="table-box">
<div class="day-box"
v-for="val in nowDate"
:key="val.nyr">
<div class="top">
<div>{{val.xq }}({{ val.nyr }})</div>
</div>
<div class="infolist">
<draggable v-model="msgList"
@start="drag=true"
@end="drag=false">
<div class="onelist"
:style="{backgroundColor:item.color}"
v-for="item in msgList"
:key="item.id">
<img @click="delInfo(item.id)"
src="../../assets/icons/del.png"
alt="">
<div class="info-name">{{item.name}}</div>
<el-button size="mini"
round
type="warning"
@click="urgentClick()"
class="czbtn">加急</el-button>
</div>
</draggable>
</div>
<div class="add-btn">
<div class="view-all">查看全部(8)</div>
<div class="fhj">+</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
name: 'VueAdminSchedule',
components: { draggable },
data () {
return {
randomColor: '',
msgList: [
{
id: 1,
name: '委托单名称+高强钢实验+1t电渣炉1',
zname: '冶炼组',
color: '',
},
{
id: 2,
name: '委托单名称+高强钢实验+1t电渣炉2',
color: '',
zname: '机加工组',
},
{
id: 3,
name: '委托单名称+高强钢实验+1t电渣炉3',
color: '',
zname: '热轧组',
},
{
id: 4,
name: '委托单名称+高强钢实验+1t电渣炉4',
color: '',
zname: '深加工组',
},
{
id: 5,
name: '委托单名称+高强钢实验+1t电渣炉5',
color: '',
zname: 'XX组',
},
{
id: 6,
name: '委托单名称+高强钢实验+1t电渣炉6',
color: '',
zname: '冶炼组',
},
{
id: 7,
name: '委托单名称+高强钢实验+1t电渣炉7',
color: '',
zname: '机加工组',
},
{
id: 8,
name: '委托单名称+高强钢实验+1t电渣炉8',
color: '',
zname: '热轧组',
},
{
id: 9,
name: '委托单名称+高强钢实验+1t电渣炉9',
color: '',
zname: '热轧组',
}
],
legendList: [
{
id: 1,
name: '冶炼组',
color: '',
dxFlag: false,
},
{
id: 2,
name: '机加工组',
color: '',
dxFlag: false,
},
{
id: 3,
name: '热轧组',
color: '',
dxFlag: false,
},
{
id: 4,
name: '深加工组',
color: '',
dxFlag: false,
},
{
id: 5,
name: 'XX组',
color: '',
dxFlag: false,
},
{
id: 6,
name: 'XX组',
color: '',
dxFlag: false,
},
],
dxFlag: false,
nowDate: [],
i: 0,
y: 0,
syz: [],
xyz: []
};
},
created () {
this.initColor()
},
mounted () {
this.getWeekDates();
},
methods: {
// 加急
urgentClick () {
},
// 删除
delInfo (id) {
console.log('id', id);
// 遍历源数据
this.msgList.forEach((v, i) => {
// 如果选中数据和源数据的某一条唯一标识符相等，删除对应的源数据
if (id === v.id) {
this.msgList.splice(i, 1)
}
})
},
initColor () {
this.legendList.forEach(item => {
item.color = this.getRandomColor()
this.msgList.forEach(val => {
if (val.zname === item.name) {
val.color = item.color
}
})
})
},
// 随机生成颜色
getRandomColor () {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
console.log('color', color);
return color;
},
changeClick (item) {
item.dxFlag = !item.dxFlag
},
getWeekDates () {
let date = new Date()
let day = date.getDay()
let diff = date.getDate() - day + (day === 0 ? -6 : 1) // 获取所在周的第一天
let weekStart = new Date(date.setDate(diff))
let weekDates = []
for (let i = 0; i < 7; i++) {
let currentDate = new Date(weekStart)
currentDate.setDate(weekStart.getDate() + i)
weekDates.push(currentDate)
}
weekDates.forEach((date) => {
let year = date.getFullYear()
let month = (date.getMonth() + 1).toString().padStart(2, '0')
let day = date.getDate().toString().padStart(2, '0')
let dayOfWeek = new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(date)
console.log(year + '-' + month + '-' + day + ' (' + dayOfWeek + ')')
this.nowDate.push({
nyr: year + '-' + month + '-' + day,
xq: dayOfWeek
})
})
},
getPreviousWeekDates () {
this.nowDate = [];
this.syz = []
if (this.y > 0) {
this.y = this.y - 1
}
this.i = this.i + 1
let weeksAgo = this.i
let today = new Date()
if (this.xyz.length > 0) {
today = new Date(this.xyz[0].nyr)
}
let firstDayOfWeek = today.getDate() - today.getDay() + (today.getDay() === 0 ? -6 : 1) // 获取本周的第一天
let startingDate = new Date(today.setDate(firstDayOfWeek))
let weekDates = []
for (let i = 0; i < weeksAgo; i++) {
startingDate.setDate(startingDate.getDate() - 7) // 递减起始日期
for (let j = 0; j < 7; j++) {
let currentDate = new Date(startingDate)
currentDate.setDate(startingDate.getDate() + j)
weekDates.push(currentDate)
}
}
let remaining = []
if (this.i > 1) {
remaining = weekDates.slice((this.i - 1) * 7)
} else {
remaining = weekDates
}
remaining.forEach((date) => {
let year = date.getFullYear()
let month = (date.getMonth() + 1).toString().padStart(2, '0')
let day = date.getDate().toString().padStart(2, '0')
let dayOfWeek = new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(date)
this.syz.push({
nyr: year + '-' + month + '-' + day,
xq: dayOfWeek
})
this.nowDate.push({
nyr: year + '-' + month + '-' + day,
xq: dayOfWeek
})
console.log(year + '-' + month + '-' + day + ' (' + dayOfWeek + ')')
// console.log(this.syz)
})
return weekDates
},
getNextWeekDates () {
this.xyz = [];
this.nowDate = [];
if (this.i > 0) {
this.i = this.i - 1
}
this.y = this.y + 1 // 将 this.i 的值加 1
let weeksAgo = this.y
let today = new Date()
if (this.syz.length > 0) {
today = new Date(this.syz[6].nyr)
}
let firstDayOfWeek = today.getDate() - today.getDay() + (today.getDay() === 0 ? -6 : 1) // 获取本周的第一天
let startingDate = new Date(today.setDate(firstDayOfWeek))
let weekDates = []
for (let i = 0; i < weeksAgo; i++) {
startingDate.setDate(startingDate.getDate() + 7) // 递增起始日期
for (let j = 0; j < 7; j++) {
let currentDate = new Date(startingDate)
currentDate.setDate(startingDate.getDate() + j)
weekDates.push(currentDate)
}
}
let remaining = []
if (this.y > 1) {
remaining = weekDates.slice((this.y - 1) * 7) // 获取下一周的日期
} else {
remaining = weekDates
}
remaining.forEach((date) => {
let year = date.getFullYear()
let month = (date.getMonth() + 1).toString().padStart(2, '0')
let day = date.getDate().toString().padStart(2, '0')
let dayOfWeek = new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(date)
this.xyz.push({
nyr: year + '-' + month + '-' + day,
xq: dayOfWeek
})
// console.log(this.xyz)
this.nowDate.push({
nyr: year + '-' + month + '-' + day,
xq: dayOfWeek
})
console.log(year + '-' + month + '-' + day + ' (' + dayOfWeek + ')')
})
return weekDates
}
},
};
</script>
<style lang="scss" scoped>
/* 为所有具有滚动条的元素自定义滚动条样式 */
::-webkit-scrollbar {
width: 2px; /* 设置滚动条的宽度 */
}
.title-name {
display: flex;
align-items: center;
.sign {
width: 5px;
height: 18px;
background-color: #3461ff;
}
.text {
margin-left: 10px;
font-weight: 900;
}
}
// 日期
.date-box {
display: flex;
.btn-box {
display: flex;
margin: 0 auto;
align-items: center;
.date {
font-weight: 900;
margin: 0 10px;
}
}
.save-box {
}
}
// 图例
.legend-box {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
.single-box {
display: flex;
margin-right: 10px;
align-items: center;
.single {
display: flex;
margin-right: 10px;
align-items: center;
.round {
cursor: pointer;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
& > span {
color: #fff;
font-size: 16px;
text-align: center;
}
}
.zname {
margin-left: 5px;
}
}
}
.status-box {
font-weight: 900;
}
}
// 表格
.table-box {
display: flex;
flex-wrap: wrap;
.day-box {
width: 25%;
position: relative;
height: 400px;
border: 1px solid rgba(211, 207, 207, 1);
.top {
text-align: center;
height: 30px;
width: 100%;
font-weight: 900;
line-height: 30px;
border-bottom: 1px solid rgba(211, 207, 207, 1);
background-color: rgb(241, 244, 250);
}
.infolist {
width: 100%;
height: 340px;
overflow: scroll;
.onelist {
height: 40px;
width: 100%;
position: relative;
line-height: 40px;
padding: 0 15px;
color: #fff;
// background-color: #3461ff;
border-bottom: 1px solid rgba(211, 207, 207, 1);
// margin: 1px 0;
& > img {
cursor: pointer;
width: 15px;
height: 13px;
position: absolute;
top: 0;
left: 0;
}
.info-name {
width: 80%;
overflow: hidden; /* 确保超出容器的文本被裁剪 */
white-space: nowrap; /* 确保文本在一行内显示 */
text-overflow: ellipsis; /* 使用省略号表示文本超出 */
}
.czbtn {
// color: red;
position: absolute;
right: 5px;
top: 5px;
}
}
}
.add-btn {
position: absolute;
bottom: 0;
padding: 0 60px 0 80px;
color: #3461ff;
justify-content: space-between;
display: flex;
height: 40px;
line-height: 40px;
width: 100%;
border-top: 1px solid rgba(211, 207, 207, 1);
.view-all {
cursor: pointer;
}
.fhj {
cursor: pointer;
font-size: 26px;
font-weight: 900;
}
}
}
}
</style>
