增加巡检内容

src/components/calenderMonthSimple.vue

@@ -0,0 +1,161 @@
+<template>
+  <view class="month-calendar">
+    <view class="header">
+      <view class="arrow" @click="prevYearMonth">‹‹</view>
+      <view class="year">
+        <picker mode="multiSelector" :value="dateIndex" 
+          :range="dateRange" @change="handleChange" 
+          @columnchange="onColumnChange"
+        >
+					<view class="uni-input">{{selectedYear}}-{{ selectedMonth.toString().padStart(2, '0') }}</view>
+				</picker>
+      </view>
+      <view class="arrow" @click="nextYearMonth">››</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed,onMounted,reactive } from "vue";
+
+const props = defineProps({
+    year: {//默认当前年
+      default: new Date().getFullYear()
+    },
+    month:{//默认1月
+      default:1
+    }
+})
+
+// 年份列表
+// const yearIndex = ref(100);
+const selectedYear = ref(props.year);
+const selectedMonth = ref(props.month);
+
+const dateIndex = ref([0, 0])
+const dateRange = ref([[],[]])
+
+// 初始化数据
+onMounted(() => {
+  let date = new Date();
+  let y = date.getFullYear();
+  // 往前100年 往后61年
+  let j = 0;
+  for (let i = 0; i < 100; i++) {
+    let a = (y-100)+i;
+    dateRange.value[0].push(a);
+    j++;
+  }
+  
+  for (let i = 0; i < 62; i++) {
+    let a = y+i
+    dateRange.value[0].push(a);
+  }
+  
+  // 生成月份
+  for (let i = 1; i <= 12; i++) {
+    dateRange.value[1].push(i)// + '月'
+  }
+  
+  // 设置默认选中
+  // const yearIndex = dateRange.years.findIndex(item => item === selectedYear.value)
+  const monthIndex = dateRange.value[1].findIndex(item => item === selectedMonth.value)
+  dateIndex.value = [j, monthIndex]
+  // console.log(dateRange.value[0],dateRange.value[1],dateIndex.value)
+})
+
+
+// 调用父组件方法
+const emit = defineEmits(["change"]);
+
+// 计算月份
+const getYearMonth=(type)=>{
+  let y= selectedYear.value;
+  let m = selectedMonth.value;
+  let current_date = new Date(y+'-'+m)
+  let month=type==1? current_date.getMonth()-1:current_date.getMonth()+1;//上个月or下个月
+  current_date.setMonth(month);
+  selectedYear.value = current_date.getFullYear();
+  selectedMonth.value = current_date.getMonth()+1;
+
+  const yearIndex = dateRange.value[0].findIndex(item => item === selectedYear.value)
+  const monthIndex = dateRange.value[1].findIndex(item => item === selectedMonth.value)
+  dateIndex.value = [yearIndex, monthIndex]
+
+  let m2 = selectedMonth.value.toString().padStart(2, '0')
+  emit('change', {year:selectedYear.value,month:selectedMonth.value,ymStr:selectedYear.value+'-'+m2});
+}
+
+// 上个月
+const prevYearMonth = () => {
+  getYearMonth(1)
+}
+
+// 下个月
+const nextYearMonth = () => {
+  getYearMonth(2)
+}
+
+// 列选择
+const onColumnChange = (e) => {
+  const { column, value } = e.detail;
+  // console.log(column,value)
+  if (column === 0) { // 年份列
+    dateIndex.value[0] = column
+    selectedYear.value = dateRange.value[column][value]
+  } else if (column === 1) { // 月份列
+    dateIndex.value[1] = column
+    selectedMonth.value = dateRange.value[column][value]
+  }
+}
+
+// 年月选择
+const handleChange=(e)=>{
+  const values = e.detail.value 
+  selectedYear.value = parseInt(dateRange.value[0][values[0]])
+  selectedMonth.value = parseInt(dateRange.value[1][values[1]])
+  // console.log('选择的日期:', `${selectedYear.value}-${selectedMonth.value.toString().padStart(2, '0')}`)
+  let m = selectedMonth.value.toString().padStart(2, '0')
+  emit('change',  {year:selectedYear.value,month:selectedMonth.value,ymStr:selectedYear.value+'-'+m});
+}
+
+// 获取
+const getNextMonth = (current_date)=>{
+  current_date.setMonth(current_date.getMonth() + 1);
+}
+
+</script>
+
+<style scoped>
+.month-calendar {
+  padding:0 20rpx;
+  background: #fff;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding:0rpx 0 16rpx;
+  /* #ifdef APP-PLUS */
+  padding:20rpx 0;
+  /* #endif */
+}
+
+.year {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.arrow {
+  font-size: 60rpx;
+  color: #CACACA;
+  padding: 0;
+  cursor: pointer;
+}
+
+.arrow:active {
+  color: #4A95FF;
+}
+</style>