完不成排班页面
This commit is contained in:
monanxiao
@@ -71,6 +71,56 @@
|
||||
|
||||
</el-card>
|
||||
|
||||
<el-drawer v-model="drawer" :direction="direction">
|
||||
<template #header>
|
||||
<h4>创建排班</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
<el-form :model="form" label-width="auto" style="max-width: 600px">
|
||||
|
||||
<el-form-item label="日期时间">
|
||||
<el-date-picker
|
||||
v-model="isDate"
|
||||
type="date"
|
||||
placeholder="排班日期"
|
||||
:disabled-date="disablePastAndSpecificDates"
|
||||
style="margin-right: 20px"
|
||||
/>
|
||||
|
||||
<el-select
|
||||
v-model="isTime"
|
||||
filterable
|
||||
placeholder="请选择排班时间"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in timeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排班人员">
|
||||
<el-checkbox-group v-model="isUserData" size="large">
|
||||
<el-checkbox-button v-for="item in userList" :key="item.label" :value="item.label" style="margin: 10px 0;">
|
||||
{{ item.label }}
|
||||
</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<div style="display: flex;justify-content: center;margin-top: 50px">
|
||||
<el-button @click="drawer = false">取消</el-button>
|
||||
<el-button type="success" @click="confirmClick">确认</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
</el-drawer>
|
||||
|
||||
<el-card class="mt10">
|
||||
<el-table
|
||||
ref="table"
|
||||
@@ -172,14 +222,136 @@ const total = ref(0)
|
||||
const formInline = ref({})
|
||||
const registerDate = ref('');
|
||||
const searchName = ref('');
|
||||
const drawer = ref(false)
|
||||
const queryData = ref({
|
||||
keyWord: '',
|
||||
page: 1,
|
||||
size: 10,
|
||||
})
|
||||
|
||||
const isUserData = ref([]); // 选中
|
||||
const userList = [
|
||||
{
|
||||
value: '1',
|
||||
label: '张三',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '王五',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '李四',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '赵高',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '秦始皇',
|
||||
},{
|
||||
value: '3',
|
||||
label: '李四',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '赵高',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '秦始皇',
|
||||
},{
|
||||
value: '3',
|
||||
label: '李四',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '赵高',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '秦始皇',
|
||||
},{
|
||||
value: '3',
|
||||
label: '李四',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '赵高',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '秦始皇',
|
||||
},{
|
||||
value: '3',
|
||||
label: '李四',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '赵高',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '秦始皇',
|
||||
},
|
||||
]; // 用户列表
|
||||
|
||||
const isTime = ref(''); // 选中时间段
|
||||
|
||||
const timeList = [
|
||||
{
|
||||
value: '1',
|
||||
label: '9:00-11:00',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '11:00-12:00',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '13:00-14:00',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '14:00-15:00',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '15:00-16:00',
|
||||
},
|
||||
];
|
||||
|
||||
const isDate = ref(''); // 当前日期
|
||||
|
||||
// 禁止选择之前的日期
|
||||
const disablePastAndSpecificDates = (date) => {
|
||||
// 获取当前日期
|
||||
const currentDate = new Date();
|
||||
|
||||
currentDate.setDate(currentDate.getDate() - 1);
|
||||
|
||||
// 禁止选择今天的前一天及之前的日期（不包含今天）
|
||||
if (date < currentDate) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 禁止选择特定的未来日期，例如节假日
|
||||
const disabledDates = [new Date(2023, 9, 1), new Date(2023, 10, 1)];
|
||||
return disabledDates.some((disabledDate) => {
|
||||
return (
|
||||
date.getFullYear() === disabledDate.getFullYear() &&
|
||||
date.getMonth() === disabledDate.getMonth() &&
|
||||
date.getDate() === disabledDate.getDate()
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const initData = () => {
|
||||
|
||||
// 获取当前日期
|
||||
isDate.value = new Date();
|
||||
tableData.value = columnData.value;
|
||||
|
||||
// orderLists(queryData.value).then((res) => {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<el-icon style="margin-right: 10px;"><CirclePlus /></el-icon>
|
||||
创建排班
|
||||
</el-button>
|
||||
</el-col>n
|
||||
</el-col>
|
||||
|
||||
<el-col :span="4">
|
||||
<div class="block">
|
||||
@@ -75,56 +75,46 @@
|
||||
</template>
|
||||
<template #default>
|
||||
|
||||
<el-input
|
||||
v-model="input1"
|
||||
style="max-width: 600px;margin-bottom: 20px"
|
||||
placeholder="请输入活动名称"
|
||||
>
|
||||
<template #prepend>活动名称</template>
|
||||
</el-input>
|
||||
<el-form :model="form" label-width="auto" style="max-width: 600px">
|
||||
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||
multiple
|
||||
>
|
||||
<el-icon class="el-icon--upload">
|
||||
<upload-filled/>
|
||||
</el-icon>
|
||||
<div class="el-upload__text">
|
||||
点击或拖拽上传缩略图(横幅缩略图)
|
||||
<el-form-item label="日期时间">
|
||||
<el-date-picker
|
||||
v-model="isDate"
|
||||
type="date"
|
||||
placeholder="排班日期"
|
||||
:disabled-date="disablePastAndSpecificDates"
|
||||
style="margin-right: 20px"
|
||||
/>
|
||||
|
||||
<el-select
|
||||
v-model="isTime"
|
||||
filterable
|
||||
placeholder="请选择排班时间"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in timeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排班人员">
|
||||
<el-checkbox-group v-model="isUserData" size="large">
|
||||
<el-checkbox-button v-for="item in userList" :key="item.label" :value="item.label" style="margin: 10px 0;">
|
||||
{{ item.label }}
|
||||
</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<div style="display: flex;justify-content: center;margin-top: 50px">
|
||||
<el-button @click="drawer = false">取消</el-button>
|
||||
<el-button type="success" @click="confirmClick">确认</el-button>
|
||||
</div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
文件格式：jpg/png
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
||||
multiple
|
||||
>
|
||||
<el-icon class="el-icon--upload">
|
||||
<upload-filled/>
|
||||
</el-icon>
|
||||
<div class="el-upload__text">
|
||||
点击或拖拽上传活动长图（活动详情）
|
||||
</div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
文件格式：jpg/png
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
|
||||
<div style="display: flex;justify-content: flex-end;margin-top: 50px">
|
||||
<el-button @click="cancelClick">取消</el-button>
|
||||
<el-button type="primary" @click="confirmClick">确认</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
</el-drawer>
|
||||
@@ -205,24 +195,23 @@
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as XLSX from 'xlsx'
|
||||
import {
|
||||
Edit,
|
||||
Delete,
|
||||
InfoFilled,
|
||||
View,
|
||||
ArrowDownBold,
|
||||
Plus,
|
||||
} from '@element-plus/icons-vue'
|
||||
// import * as XLSX from 'xlsx'
|
||||
// import {
|
||||
// Edit,
|
||||
// Delete,
|
||||
// InfoFilled,
|
||||
// View,
|
||||
// ArrowDownBold,
|
||||
// Plus,
|
||||
// } from '@element-plus/icons-vue'
|
||||
import {nextTick, onMounted, reactive, ref} from 'vue'
|
||||
|
||||
import {options} from './options.js'
|
||||
import {getUserList} from "../../api/modules/user";
|
||||
|
||||
const tableData = ref([])
|
||||
const dataList = ref([])
|
||||
// const dataList = ref([])
|
||||
const table = ref()
|
||||
const tabclickIndex = ref()
|
||||
// const tabclickIndex = ref()
|
||||
const isExpand = ref(false)
|
||||
const columnData = ref(JSON.parse(JSON.stringify(options)))
|
||||
const disabled = ref(false)
|
||||
@@ -238,8 +227,129 @@ const queryData = ref({
|
||||
size: 10,
|
||||
})
|
||||
|
||||
const isUserData = ref([]); // 选中
|
||||
const userList = [
|
||||
{
|
||||
value: '1',
|
||||
label: '张三',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '王五',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '李四',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '赵高',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '秦始皇',
|
||||
},{
|
||||
value: '3',
|
||||
label: '李四',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '赵高',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '秦始皇',
|
||||
},{
|
||||
value: '3',
|
||||
label: '李四',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '赵高',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '秦始皇',
|
||||
},{
|
||||
value: '3',
|
||||
label: '李四',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '赵高',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '秦始皇',
|
||||
},{
|
||||
value: '3',
|
||||
label: '李四',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '赵高',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '秦始皇',
|
||||
},
|
||||
]; // 用户列表
|
||||
|
||||
const isTime = ref(''); // 选中时间段
|
||||
|
||||
const timeList = [
|
||||
{
|
||||
value: '1',
|
||||
label: '9:00-11:00',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '11:00-12:00',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '13:00-14:00',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '14:00-15:00',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '15:00-16:00',
|
||||
},
|
||||
];
|
||||
|
||||
const isDate = ref(''); // 当前日期
|
||||
|
||||
// 禁止选择之前的日期
|
||||
const disablePastAndSpecificDates = (date) => {
|
||||
// 获取当前日期
|
||||
const currentDate = new Date();
|
||||
|
||||
currentDate.setDate(currentDate.getDate() - 1);
|
||||
|
||||
// 禁止选择今天的前一天及之前的日期（不包含今天）
|
||||
if (date < currentDate) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 禁止选择特定的未来日期，例如节假日
|
||||
const disabledDates = [new Date(2023, 9, 1), new Date(2023, 10, 1)];
|
||||
return disabledDates.some((disabledDate) => {
|
||||
return (
|
||||
date.getFullYear() === disabledDate.getFullYear() &&
|
||||
date.getMonth() === disabledDate.getMonth() &&
|
||||
date.getDate() === disabledDate.getDate()
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const initData = () => {
|
||||
|
||||
// 获取当前日期
|
||||
isDate.value = new Date();
|
||||
|
||||
tableData.value = columnData.value;
|
||||
|
||||
// orderLists(queryData.value).then((res) => {
|
||||
@@ -288,7 +398,7 @@ const searchEvnt = ()=> {
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initData()
|
||||
initData();
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user