|
@@ -1,69 +1,20 @@
|
|
-<template>
|
|
|
|
- <div class="calendar">
|
|
|
|
- <table class="calendar-table calendar-table-hour">
|
|
|
|
- <thead class="calendar-head">
|
|
|
|
- <tr>
|
|
|
|
- <th rowspan="8" class="week-td">星期 / 时间</th>
|
|
|
|
- <th colspan="12">00:00 - 12:00</th>
|
|
|
|
- <th colspan="12">12:00 - 24:00</th>
|
|
|
|
- <th colspan="4" rowspan="2" class="week-td" style="display: none">小时</th>
|
|
|
|
- </tr>
|
|
|
|
- <tr>
|
|
|
|
- <th colspan="1" v-for="(_, i) in 24" :key="i">{{ i }}</th>
|
|
|
|
- </tr>
|
|
|
|
- </thead>
|
|
|
|
- <tbody>
|
|
|
|
- <template v-for="(hoursList, week) in items">
|
|
|
|
- <tr>
|
|
|
|
- <th>{{ WeekMap[week] }}</th>
|
|
|
|
- <td
|
|
|
|
- v-for="(info, hour) in hoursList"
|
|
|
|
- :key="hour"
|
|
|
|
- @mousedown="handleMouseDown(week, hour, $event)"
|
|
|
|
- @mouseover="handleMouseMove(week, hour)"
|
|
|
|
- @mouseup="handleMouseUp"
|
|
|
|
- :style="getTdStyle(info)">
|
|
|
|
- <span class="cell-text"> {{ info.value ? info.value : '' }} </span>
|
|
|
|
- </td>
|
|
|
|
- </tr>
|
|
|
|
- </template>
|
|
|
|
- <tr>
|
|
|
|
- <th colspan="28" class="clear-bar">
|
|
|
|
- <span class="middle">可拖动鼠标选择时间段</span>
|
|
|
|
- <el-button class="hover-link fr" link @click="resetAllBid" :disabled="disabled">全部重置</el-button>
|
|
|
|
- </th>
|
|
|
|
- </tr>
|
|
|
|
- </tbody>
|
|
|
|
- </table>
|
|
|
|
-
|
|
|
|
- <el-dialog v-model="dialogVisible" title="修改出价系数" width="30%" :close-on-click-modal="false" :before-close="closeDialog">
|
|
|
|
- <el-input-number v-model="bid" :min="0" :max="100" :step="0.1" controls-position="right" />
|
|
|
|
- <template #footer>
|
|
|
|
- <span class="dialog-footer">
|
|
|
|
- <el-button @click="cancelBid">取消</el-button>
|
|
|
|
- <el-button type="primary" @click="submitBid">确认</el-button>
|
|
|
|
- </span>
|
|
|
|
- </template>
|
|
|
|
- </el-dialog>
|
|
|
|
- </div>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
-import { ref, onMounted, watch, reactive } from 'vue'
|
|
|
|
|
|
+import { ref, onMounted, watch, reactive } from 'vue';
|
|
|
|
|
|
interface Props {
|
|
interface Props {
|
|
- data: number[][]
|
|
|
|
- disabled: boolean
|
|
|
|
|
|
+ data: number[][];
|
|
|
|
+ disabled: boolean;
|
|
}
|
|
}
|
|
|
|
+
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
disabled: false,
|
|
disabled: false,
|
|
-})
|
|
|
|
-const bidData = ref(props.data)
|
|
|
|
|
|
+});
|
|
|
|
+const bidData = ref(props.data);
|
|
|
|
|
|
-const mouseDown = ref(false)
|
|
|
|
-const startRowIndex = ref(0)
|
|
|
|
-const startColIndex = ref(0)
|
|
|
|
-const items = ref([])
|
|
|
|
|
|
+const mouseDown = ref(false);
|
|
|
|
+const startRowIndex = ref(0);
|
|
|
|
+const startColIndex = ref(0);
|
|
|
|
+const items = ref([]);
|
|
const WeekMap = {
|
|
const WeekMap = {
|
|
0: '星期一',
|
|
0: '星期一',
|
|
1: '星期二',
|
|
1: '星期二',
|
|
@@ -72,25 +23,25 @@ const WeekMap = {
|
|
4: '星期五',
|
|
4: '星期五',
|
|
5: '星期六',
|
|
5: '星期六',
|
|
6: '星期日',
|
|
6: '星期日',
|
|
-}
|
|
|
|
-const dialogVisible = ref(false)
|
|
|
|
-const bid = ref(0)
|
|
|
|
-const selectedItems = ref({})
|
|
|
|
|
|
+};
|
|
|
|
+const dialogVisible = ref(false);
|
|
|
|
+const bid = ref(0);
|
|
|
|
+const selectedItems = ref({});
|
|
|
|
|
|
-const getTdStyle = (info: any) => {
|
|
|
|
|
|
+function getTdStyle(info: any) {
|
|
if (props.disabled) {
|
|
if (props.disabled) {
|
|
- return { cursor: 'not-allowed', background: '#fff' }
|
|
|
|
|
|
+ return { cursor: 'not-allowed', background: '#fff' };
|
|
}
|
|
}
|
|
- return { background: info.selected ? '#ccdbff' : '' }
|
|
|
|
|
|
+ return { background: info.selected ? '#ccdbff' : '' };
|
|
}
|
|
}
|
|
|
|
|
|
for (let i = 0; i < 7; i++) {
|
|
for (let i = 0; i < 7; i++) {
|
|
- selectedItems.value[i] = []
|
|
|
|
- const tmp = []
|
|
|
|
|
|
+ selectedItems.value[i] = [];
|
|
|
|
+ const tmp = [];
|
|
for (let j = 0; j < 24; j++) {
|
|
for (let j = 0; j < 24; j++) {
|
|
- tmp.push({ value: bidData.value.length === 0 ? 0 : bidData.value[i][j], selected: false })
|
|
|
|
|
|
+ tmp.push({ value: bidData.value.length === 0 ? 0 : bidData.value[i][j], selected: false });
|
|
}
|
|
}
|
|
- items.value.push(tmp)
|
|
|
|
|
|
+ items.value.push(tmp);
|
|
}
|
|
}
|
|
|
|
|
|
watch(
|
|
watch(
|
|
@@ -99,113 +50,166 @@ watch(
|
|
// console.log(100, 'watch', props.data)
|
|
// console.log(100, 'watch', props.data)
|
|
if (props.data.length === 0) {
|
|
if (props.data.length === 0) {
|
|
for (let i = 0; i < 7; i++) {
|
|
for (let i = 0; i < 7; i++) {
|
|
- const tmp = []
|
|
|
|
|
|
+ const tmp = [];
|
|
for (let j = 0; j < 24; j++) {
|
|
for (let j = 0; j < 24; j++) {
|
|
- tmp.push(0)
|
|
|
|
|
|
+ tmp.push(0);
|
|
}
|
|
}
|
|
- props.data.push(tmp)
|
|
|
|
|
|
+ props.data.push(tmp);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
for (let i = 0; i < 7; i++) {
|
|
for (let i = 0; i < 7; i++) {
|
|
for (let j = 0; j < 24; j++) {
|
|
for (let j = 0; j < 24; j++) {
|
|
- items.value[i][j].value = props.data[i][j]
|
|
|
|
|
|
+ items.value[i][j].value = props.data[i][j];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- bidData.value = props.data
|
|
|
|
|
|
+ bidData.value = props.data;
|
|
},
|
|
},
|
|
{ immediate: true }
|
|
{ immediate: true }
|
|
-)
|
|
|
|
|
|
+);
|
|
|
|
|
|
-const handleMouseDown = (rowIndex: number, colIndex: number, event: any) => {
|
|
|
|
- if (props.disabled) return
|
|
|
|
|
|
+function handleMouseDown(rowIndex: number, colIndex: number, event: any) {
|
|
|
|
+ if (props.disabled) return;
|
|
if (event.button === 0) {
|
|
if (event.button === 0) {
|
|
- mouseDown.value = true
|
|
|
|
- startRowIndex.value = rowIndex
|
|
|
|
- startColIndex.value = colIndex
|
|
|
|
- items.value[rowIndex][colIndex].selected = true
|
|
|
|
- selectedItems.value[rowIndex].push(colIndex)
|
|
|
|
|
|
+ mouseDown.value = true;
|
|
|
|
+ startRowIndex.value = rowIndex;
|
|
|
|
+ startColIndex.value = colIndex;
|
|
|
|
+ items.value[rowIndex][colIndex].selected = true;
|
|
|
|
+ selectedItems.value[rowIndex].push(colIndex);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-const handleMouseUp = (event: any) => {
|
|
|
|
- if (props.disabled) return
|
|
|
|
|
|
+function handleMouseUp(event: any) {
|
|
|
|
+ if (props.disabled) return;
|
|
if (event.button === 0) {
|
|
if (event.button === 0) {
|
|
- mouseDown.value = false
|
|
|
|
- startColIndex.value = 0
|
|
|
|
- startRowIndex.value = 0
|
|
|
|
- dialogVisible.value = true
|
|
|
|
|
|
+ mouseDown.value = false;
|
|
|
|
+ startColIndex.value = 0;
|
|
|
|
+ startRowIndex.value = 0;
|
|
|
|
+ dialogVisible.value = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-const handleMouseMove = (rowIndex: number, colIndex: number) => {
|
|
|
|
- if (props.disabled) return
|
|
|
|
|
|
+function handleMouseMove(rowIndex: number, colIndex: number) {
|
|
|
|
+ if (props.disabled) return;
|
|
if (mouseDown.value) {
|
|
if (mouseDown.value) {
|
|
- selectCell(rowIndex, colIndex)
|
|
|
|
|
|
+ selectCell(rowIndex, colIndex);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-const selectCell = (rowIndex: number, colIndex: number) => {
|
|
|
|
- if (props.disabled) return
|
|
|
|
- const rowStart = Math.min(startRowIndex.value, rowIndex)
|
|
|
|
- const rowEnd = Math.max(startRowIndex.value, rowIndex)
|
|
|
|
- const cellStart = Math.min(startColIndex.value, colIndex)
|
|
|
|
- const cellEnd = Math.max(startColIndex.value, colIndex)
|
|
|
|
|
|
+function selectCell(rowIndex: number, colIndex: number) {
|
|
|
|
+ if (props.disabled) return;
|
|
|
|
+ const rowStart = Math.min(startRowIndex.value, rowIndex);
|
|
|
|
+ const rowEnd = Math.max(startRowIndex.value, rowIndex);
|
|
|
|
+ const cellStart = Math.min(startColIndex.value, colIndex);
|
|
|
|
+ const cellEnd = Math.max(startColIndex.value, colIndex);
|
|
|
|
|
|
for (let i = rowStart; i <= rowEnd; i++) {
|
|
for (let i = rowStart; i <= rowEnd; i++) {
|
|
for (let j = cellStart; j <= cellEnd; j++) {
|
|
for (let j = cellStart; j <= cellEnd; j++) {
|
|
- items.value[i][j].selected = true
|
|
|
|
- selectedItems.value[i].push(j)
|
|
|
|
|
|
+ items.value[i][j].selected = true;
|
|
|
|
+ selectedItems.value[i].push(j);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-const submitBid = () => {
|
|
|
|
|
|
+function submitBid() {
|
|
// console.log(151, 'submitBid', bidData)
|
|
// console.log(151, 'submitBid', bidData)
|
|
for (const row of Object.keys(selectedItems.value)) {
|
|
for (const row of Object.keys(selectedItems.value)) {
|
|
for (const col of selectedItems.value[row]) {
|
|
for (const col of selectedItems.value[row]) {
|
|
- items.value[row][col].value = bid.value
|
|
|
|
- bidData.value[row][col] = bid.value
|
|
|
|
|
|
+ items.value[row][col].value = bid.value;
|
|
|
|
+ bidData.value[row][col] = bid.value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- clearSelectedItems()
|
|
|
|
- clearCellBackgroundColor()
|
|
|
|
- dialogVisible.value = false
|
|
|
|
|
|
+ clearSelectedItems();
|
|
|
|
+ clearCellBackgroundColor();
|
|
|
|
+ dialogVisible.value = false;
|
|
}
|
|
}
|
|
|
|
|
|
-const cancelBid = () => {
|
|
|
|
- clearSelectedItems()
|
|
|
|
- clearCellBackgroundColor()
|
|
|
|
- dialogVisible.value = false
|
|
|
|
|
|
+function cancelBid() {
|
|
|
|
+ clearSelectedItems();
|
|
|
|
+ clearCellBackgroundColor();
|
|
|
|
+ dialogVisible.value = false;
|
|
}
|
|
}
|
|
|
|
|
|
-const clearCellBackgroundColor = () => {
|
|
|
|
|
|
+function clearCellBackgroundColor() {
|
|
for (const hoursList of items.value) {
|
|
for (const hoursList of items.value) {
|
|
for (const info of hoursList) {
|
|
for (const info of hoursList) {
|
|
- info.selected = false
|
|
|
|
|
|
+ info.selected = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-const clearSelectedItems = () => {
|
|
|
|
|
|
+
|
|
|
|
+function clearSelectedItems() {
|
|
for (var i = 0; i < 7; i++) {
|
|
for (var i = 0; i < 7; i++) {
|
|
- selectedItems.value[i] = []
|
|
|
|
|
|
+ selectedItems.value[i] = [];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-const resetAllBid = () => {
|
|
|
|
|
|
+
|
|
|
|
+function resetAllBid() {
|
|
for (let i = 0; i < 7; i++) {
|
|
for (let i = 0; i < 7; i++) {
|
|
for (let j = 0; j < 24; j++) {
|
|
for (let j = 0; j < 24; j++) {
|
|
- items.value[i][j].value = 0
|
|
|
|
- items.value[i][j].selected = false
|
|
|
|
- bidData.value[i][j] = 0
|
|
|
|
|
|
+ items.value[i][j].value = 1;
|
|
|
|
+ items.value[i][j].selected = false;
|
|
|
|
+ bidData.value[i][j] = 1; // TODO: 不知道是什么东西
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-const closeDialog = (done: Function) => {
|
|
|
|
|
|
+
|
|
|
|
+function closeDialog(done: Function) {
|
|
// console.log("closeDialog")
|
|
// console.log("closeDialog")
|
|
- cancelBid()
|
|
|
|
- done()
|
|
|
|
|
|
+ cancelBid();
|
|
|
|
+ done();
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
+<template>
|
|
|
|
+ <div class="calendar">
|
|
|
|
+ <table class="calendar-table calendar-table-hour">
|
|
|
|
+ <thead class="calendar-head">
|
|
|
|
+ <tr>
|
|
|
|
+ <th rowspan="8" class="week-td">星期 / 时间</th>
|
|
|
|
+ <th colspan="12">00:00 - 12:00</th>
|
|
|
|
+ <th colspan="12">12:00 - 24:00</th>
|
|
|
|
+ <th colspan="4" rowspan="2" class="week-td" style="display: none">小时</th>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <th colspan="1" v-for="(_, i) in 24" :key="i">{{ i }}</th>
|
|
|
|
+ </tr>
|
|
|
|
+ </thead>
|
|
|
|
+ <tbody>
|
|
|
|
+ <template v-for="(hoursList, week) in items">
|
|
|
|
+ <tr>
|
|
|
|
+ <th>{{ WeekMap[week] }}</th>
|
|
|
|
+ <td
|
|
|
|
+ v-for="(info, hour) in hoursList"
|
|
|
|
+ :key="hour"
|
|
|
|
+ @mousedown="handleMouseDown(week, hour, $event)"
|
|
|
|
+ @mouseover="handleMouseMove(week, hour)"
|
|
|
|
+ @mouseup="handleMouseUp"
|
|
|
|
+ :style="getTdStyle(info)">
|
|
|
|
+ <span class="cell-text"> {{ info.value ? info.value : '' }} </span>
|
|
|
|
+ </td>
|
|
|
|
+ </tr>
|
|
|
|
+ </template>
|
|
|
|
+ <tr>
|
|
|
|
+ <th colspan="28" class="clear-bar">
|
|
|
|
+ <span class="middle">可拖动鼠标选择时间段</span>
|
|
|
|
+ <el-button class="hover-link fr" link @click="resetAllBid" :disabled="disabled">全部重置</el-button>
|
|
|
|
+ </th>
|
|
|
|
+ </tr>
|
|
|
|
+ </tbody>
|
|
|
|
+ </table>
|
|
|
|
+
|
|
|
|
+ <el-dialog v-model="dialogVisible" title="修改出价系数" width="30%" :close-on-click-modal="false" :before-close="closeDialog">
|
|
|
|
+ <el-input-number v-model="bid" :min="0" :max="100" :step="0.1" controls-position="right" />
|
|
|
|
+ <template #footer>
|
|
|
|
+ <span class="dialog-footer">
|
|
|
|
+ <el-button @click="cancelBid">取消</el-button>
|
|
|
|
+ <el-button type="primary" @click="submitBid">确认</el-button>
|
|
|
|
+ </span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
.calendar {
|
|
.calendar {
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
@@ -280,9 +284,11 @@ table {
|
|
font-size: 13px;
|
|
font-size: 13px;
|
|
margin-top: 7px;
|
|
margin-top: 7px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.fr {
|
|
.fr {
|
|
float: right;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
+
|
|
.middle {
|
|
.middle {
|
|
float: center;
|
|
float: center;
|
|
}
|
|
}
|