From e5c52d589e83bd7f4d50e62bed2b05b27740282a Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期日, 05 五月 2024 00:22:52 +0800
Subject: [PATCH] update
---
src/views/console/base/Add.vue | 234 ++++++++++++++++++++++++++++++++++++++--------
src/views/console/base/CalenderTab.vue | 9 +
2 files changed, 198 insertions(+), 45 deletions(-)
diff --git a/src/views/console/base/Add.vue b/src/views/console/base/Add.vue
index 0485acf..a0c6a31 100644
--- a/src/views/console/base/Add.vue
+++ b/src/views/console/base/Add.vue
@@ -1,62 +1,143 @@
<!--
* @Date: 2024-05-04 16:37:48
* @LastEditors: Sneed
- * @LastEditTime: 2024-05-04 17:14:15
+ * @LastEditTime: 2024-05-05 00:16:31
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/base/Add.vue
-->
<template>
<el-container>
- <el-form style="width: 100%;" :model="form" :rules="rules" ref="dialogForm" label-width="120px"
- label-position="center">
- <el-row>
- <el-col :span="8">
- <el-form-item label="鐢熶骇鏃ュ巻缂栧彿" prop="code">
- <el-input v-model="form.code" placeholder="璇疯緭鍏ョ敓浜ф棩鍘嗙紪鍙�" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="鐢熶骇鏃ュ巻鍚嶇О" prop="name">
- <el-input v-model="form.name" placeholder="璇疯緭鍏ョ敓浜ф棩鍘嗗悕绉�" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="搴旂敤骞翠唤" prop="year">
- <el-select v-model="form.year" placeholder="" size="" @change="change">
- <el-option v-for="item in options" :key="item.value" :label="item.label"
- :value="item.value" />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="搴旂敤鏃ユ湡" prop="date">
- <el-date-picker v-model="form.date" type="daterange" value-format="YYYY-MM-DD"
- start-placeholder="寮�濮嬫棩鏈�" end-placeholder="缁撴潫鏃ユ湡" />
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
<el-row>
- <el-col>
- <el-button-group>
- <el-button type="primary" :icon="ArrowLeft">Previous Page</el-button>
- <el-button type="primary">
- Next Page<el-icon class="el-icon--right">
- <ArrowRight />
- </el-icon>
- </el-button>
- </el-button-group>
- </el-col>
+ <el-form style="width: 100%;" :model="form" :rules="rules" ref="dialogForm" label-width="120px"
+ label-position="center">
+ <el-row>
+ <el-col :span="8">
+ <el-form-item label="鐢熶骇鏃ュ巻缂栧彿" prop="code">
+ <el-input v-model="form.code" placeholder="璇疯緭鍏ョ敓浜ф棩鍘嗙紪鍙�" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="鐢熶骇鏃ュ巻鍚嶇О" prop="name">
+ <el-input v-model="form.name" placeholder="璇疯緭鍏ョ敓浜ф棩鍘嗗悕绉�" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="搴旂敤骞翠唤" prop="year">
+ <el-select v-model="form.year" placeholder="" size="" @change="change">
+ <el-option v-for="item in options" :key="item.value" :label="item.label"
+ :value="item.value" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="搴旂敤鏃ユ湡" prop="date">
+ <el-date-picker v-model="form.date" type="daterange" value-format="YYYY-MM-DD"
+ start-placeholder="寮�濮嬫棩鏈�" end-placeholder="缁撴潫鏃ユ湡" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="8" :offset="1">
+ <el-button-group>
+ <el-button :type="activeBtn == 0 ? 'primary' : ''"
+ @click="activeBtn = 0">鎸夎寰嬮�変腑鏃ユ湡</el-button>
+ <el-button :type="activeBtn == 1 ? 'primary' : ''" @click="activeBtn = 1">
+ 鎸夐棿闅旈�変腑鏃ユ湡
+ </el-button>
+ </el-button-group>
+ </el-col>
+ <el-col :offset="1">
+ <el-radio-group v-model="radio">
+ <el-radio :value="0">鍖呭惈鍋囨湡</el-radio>
+ <el-radio :value="1">涓嶅惈鍋囨湡</el-radio>
+ <el-radio :value="2">浠呭惈鍋囨湡</el-radio>
+ </el-radio-group>
+ </el-col>
+ <el-col :span="4" :offset="1">
+ <el-checkbox-group v-model="checkboxGroup" size="small" style="width: 200px" @change="change">
+ <el-checkbox-button v-for="item in quicks" :key="item.value" :label="item.value">
+ {{ item.label }}
+ </el-checkbox-button>
+ </el-checkbox-group>
+
+ </el-col>
+ <el-col :span="8">
+ <el-checkbox-group v-model="checkboxGroup1" size="small" style="width: 400px">
+ <el-checkbox-button v-for="item in weeks" :key="item.value" :label="item.value">
+ {{ item.label }}
+ </el-checkbox-button>
+ </el-checkbox-group>
+ </el-col>
+ </el-row>
+ <el-row v-if="months.length > 0">
+ <el-col :span="6" v-for="(item, i) in months" :key="i" style="padding: 10px;">
+ <!-- <Calendar :min-date="item.start" :rows="1" :attributes="item.attributes"
+ @dayclick="dayclick($event, item)" /> -->
+ <Calendar :min-date="item.min" :rows="1" disable-page-swipe :nav-visibility="''"
+ :attributes='item.attributes' @dayclick="dayclick($event, item)" />
+ </el-col>
+ </el-row>
+ </el-form>
</el-row>
+
</el-container>
</template>
<script>
import moment from 'moment'
+import { Calendar, DatePicker } from 'v-calendar';
export default {
+ components: {
+ Calendar,
+ DatePicker
+ },
data() {
return {
+ selectAttribute: [{ dot: true }],
+ activeBtn: 0,
+ checkboxGroup: [],
+ checkboxGroup1: [],
+ months: [
+
+ ],
+ quicks: [{
+ label: '宸ヤ綔鏃�',
+ value: 0
+ }, {
+ label: '鍛ㄦ湯',
+ value: 1
+ }],
+ weeks: [
+ {
+ label: '涓�',
+ value: 0
+ },
+ {
+ label: '浜�',
+ value: 1
+ },
+ {
+ label: '涓�',
+ value: 2
+ },
+ {
+ label: '鍥�',
+ value: 3
+ },
+ {
+ label: '浜�',
+ value: 4
+ },
+ {
+ label: '鍏�',
+ value: 5
+ },
+ {
+ label: '鏃�',
+ value: 6
+ },
+ ],
options: [],
- form: {},
+ form: {
+ year: ''
+ },
rules: {
name: [
{ required: true, message: '' }
@@ -68,6 +149,55 @@
{ required: true, message: '' }
],
}
+ }
+ },
+ watch: {
+ checkboxGroup1() {
+
+ },
+ 'form.year'(val) {
+ this.months = []
+ let currentYear = moment(val, 'YYYY').format('YYYY') - 0
+
+ // console.log(this.months)
+ this.$HTTP.post('/api/blade-cps/shift-off-day/list', {
+ year: currentYear,
+ startOffDay: `${currentYear}-01-01`,
+ endOffDay: `${currentYear}-12-31`
+ }).then(res => {
+ if (res.code === 200) {
+ this.offDays = res.data
+ }
+ let arr = []
+ res.data.forEach(v => {
+ arr.push(v.startOffDay)
+ let day = moment(v.startOffDay)
+ while (day.add(1, 'd').unix() <= moment(v.endOffDay).unix()) {
+ arr.push(day.format('YYYY-MM-DD'))
+ }
+ })
+ for (let i = 0; i < 1; i++) {
+ console.log('>>>>', moment().year(currentYear).month(i).date(1).toDate())
+ this.months.push({
+ min: new Date('2024-01-01'),
+ attributes: [
+ {
+ dot: 'yellow',
+ dates: arr.filter(item => {
+ // console.log(moment(item).month(), 'mmonth', item)
+ return moment(item).month() === i
+ })
+ },
+ {
+ highlight: true,
+ dates: [],
+ }
+ ]
+ })
+
+ }
+ console.log(this.months, '?/')
+ })
}
},
created() {
@@ -86,7 +216,27 @@
})
}
this.form.date = [moment().format('YYYY-MM-DD'), moment(`${currentYear}-12-31`).format('YYYY-MM-DD')]
- console.log(this.form)
+ // console.log(this.form)
+ },
+ change(val) {
+ this.checkboxGroup1 = []
+ if (val?.some(v => v === 0)) {
+ this.checkboxGroup1.push(...[0, 1, 2, 3, 4])
+ }
+ if (val?.some(v => v === 1)) {
+ this.checkboxGroup1.push(...[5, 6])
+ }
+ },
+ dayclick(day, item) {
+
+ let index = item.attributes[1].dates.findIndex(v => v === day.id)
+ console.log(index)
+ if (index >= 0) {
+ item.attributes[1].dates.splice(index, 1)
+ } else {
+ item.attributes[1].dates.push(day.id)
+ }
+ console.log(index, item.attributes[1].dates)
}
}
}
diff --git a/src/views/console/base/CalenderTab.vue b/src/views/console/base/CalenderTab.vue
index 9fe9100..853691a 100644
--- a/src/views/console/base/CalenderTab.vue
+++ b/src/views/console/base/CalenderTab.vue
@@ -1,7 +1,7 @@
<!--
* @Date: 2024-04-04 22:45:43
* @LastEditors: Sneed
- * @LastEditTime: 2024-05-04 16:44:58
+ * @LastEditTime: 2024-05-05 00:14:21
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/base/CalenderTab.vue
-->
<template>
@@ -28,8 +28,8 @@
</el-popconfirm>
</el-header>
<el-main>
- <Calendar :min-date="minDate" :rows="1" disable-page-swipe :nav-visibility="''"
- :attributes='attributes' />
+ <Calendar :min-date="minDate" :rows="1" disable-page-swipe :nav-visibility="''" :attributes='attributes'
+ @dayclick="dayclick($event, item)" />
</el-main>
</el-container>
<el-drawer v-model="drawer" size="80%" title="鐢熶骇鏃ュ巻" :direction="direction" :before-close="handleClose">
@@ -68,6 +68,9 @@
this.init()
},
methods: {
+ dayclick(day) {
+ console.log(day)
+ },
init() {
this.minDate = new Date('2024-01-01')
this.maxDate = new Date('2024-01-31')
--
Gitblit v1.9.3