kd-aiot-frontend/src/views/rulesManagement/earlyWarningRules/components/rule-cycle.vue

<template>
  <div>
    <el-row :gutter="8" v-if="pageType">
      <el-col :span="2">
        <!-- @input="
            (value) =>
              (formData.cycleValue = value.replace(/^(0+)|[^\d]+/g, ''))
          " -->
        <el-input
          class="cycle_value"
          size="small"
          v-model.number="formData.cycleValue"
          @change="cycleValueChange"
          placeholder="请输入"
          :disabled="isBindPlan"
        ></el-input>
      </el-col>
      <el-col :span="3">
        <el-select
          v-model="formData.cycleType"
          size="small"
          @change="handleCycleTypeChange"
          :disabled="isBindPlan"
        >
          <el-option
            v-for="item in cycleOpt"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          ></el-option>
        </el-select>
      </el-col>

      <el-col :span="8" v-if="[1, 2, 4, 5].includes(formData.cycleType)">
        <div
          v-for="(item, index) in ruleCycleList"
          :key="index"
          class="cycle01_box"
        >
          <el-input
            v-model.number="item.month"
            size="small"
            oninput="value = value.replace(/^(0+)|[^\d]+/g,'')"
            @input="(e) => inputMonth(e, index)"
            v-if="[5].includes(formData.cycleType)"
            :disabled="isBindPlan"
          >
            <template #suffix>月</template>
          </el-input>

          <el-input
            v-model.number="item.day"
            size="small"
            oninput="value = value.replace(/^(0+)|[^\d]+/g,'')"
            @input="(e) => inputDay(e, index)"
            v-if="[4, 5].includes(formData.cycleType)"
            :disabled="isBindPlan"
          >
            <template #suffix>日</template>
          </el-input>

          <el-input
            v-model.number="item.hour"
            size="small"
            oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
            @input="(e) => inputHour(e, index)"
            v-if="[2, 4, 5].includes(formData.cycleType)"
            :disabled="isBindPlan"
          >
            <template #suffix>时</template>
          </el-input>

          <el-input
            v-model.number="item.minute"
            size="small"
            oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
            @input="(e) => inputMinute(e, index)"
            :disabled="isBindPlan"
          >
            <template #suffix>分</template>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <el-row v-else>
      <el-col :span="24" class="cycle_time_column">
        <span style="margin-right: 20px"
          >{{ formData.cycleValue }}{{ cycleOptObj[formData.cycleType] }}</span
        >
        <div v-if="[1, 2, 4, 5].includes(formData.cycleType)">
          <span v-if="[5].includes(formData.cycleType)"
            >{{ ruleCycleList[0].month }}月</span
          >
          <span v-if="[4, 5].includes(formData.cycleType)"
            >{{ ruleCycleList[0].day }}日</span
          >
          <span v-if="[2, 4, 5].includes(formData.cycleType)"
            >{{ ruleCycleList[0].hour }}时</span
          >
          <span>{{ ruleCycleList[0].minute }}分</span>
        </div>
      </el-col>
    </el-row>

    <!-- 根据周期类型展示时间组件 11,12,13,14 -->
    <div>
      <!-- 次/天 -->
      <el-row :gutter="20" v-if="formData.cycleType === 11">
        <el-col
          v-for="(item, index) in ruleCycleList"
          :key="index"
          :span="6"
          class="cycle_item"
        >
          <span>第{{ index + 1 }}次</span>
          <div class="cycle_sub_item" v-if="pageType">
            <el-input
              v-model.number="item.hour"
              size="small"
              placeholder="时"
              oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
              @input="(e) => inputHour(e, index)"
              :disabled="isBindPlan"
            >
              <template #suffix>时</template>
            </el-input>
          </div>
          <div v-else>{{ item.hour }}时</div>
          <div class="cycle_sub_item" v-if="pageType">
            <el-input
              v-model.number="item.minute"
              size="small"
              oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
              @input="(e) => inputMinute(e, index)"
              placeholder="分"
              :disabled="isBindPlan"
            >
              <template #suffix>分</template>
            </el-input>
          </div>
          <div v-else>
            {{ item.minute > 9 ? item.minute : '0' + item.minute }}分
          </div>
        </el-col>
      </el-row>
      <!-- 次/周 -->
      <el-row :gutter="20" v-else-if="formData.cycleType === 12">
        <el-col
          v-for="(item, index) in ruleCycleList"
          :key="index"
          :span="6"
          class="cycle_item"
        >
          <span>第{{ index + 1 }}次</span>
          <div class="cycle_sub_item" v-if="pageType">
            <el-select
              v-model.number="item.week"
              size="small"
              placeholder="周"
              :disabled="isBindPlan"
            >
              <el-option
                v-for="item in weekList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option> </el-select
            >周
          </div>
          <div v-else>{{ item.week }}</div>
          <div class="cycle_sub_item" v-if="pageType">
            <el-input
              v-model.number="item.hour"
              size="small"
              placeholder="时"
              oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
              @input="(e) => inputHour(e, index)"
              :disabled="isBindPlan"
            >
              <template #suffix>时</template>
            </el-input>
          </div>
          <div v-else>{{ item.hour }}时</div>
        </el-col>
      </el-row>
      <!-- 次/月 -->
      <el-row :gutter="20" v-else-if="formData.cycleType === 13">
        <el-col
          v-for="(item, index) in ruleCycleList"
          :key="index"
          :span="6"
          class="cycle_item"
        >
          <span>第{{ index + 1 }}次</span>
          <div class="cycle_sub_item" v-if="pageType">
            <el-input
              v-model.number="item.day"
              size="small"
              placeholder="日"
              oninput="value = value.replace(/^(0+)|[^\d]+/g,'')"
              @input="(e) => inputDay(e, index)"
              :disabled="isBindPlan"
            >
              <template #suffix>日</template>
            </el-input>
          </div>
          <div v-else>{{ item.day }}日</div>
          <div class="cycle_sub_item" v-if="pageType">
            <el-input
              v-model.number="item.hour"
              size="small"
              placeholder="时"
              oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
              @input="(e) => inputHour(e, index)"
              :disabled="isBindPlan"
            >
              <template #suffix>时</template>
            </el-input>
          </div>
          <div v-else>{{ item.hour }}</div>
        </el-col>
      </el-row>
      <!-- 次/年 -->
      <el-row :gutter="20" v-else-if="formData.cycleType === 14">
        <el-col
          v-for="(item, index) in ruleCycleList"
          :key="index"
          :span="6"
          class="cycle_item"
        >
          <span>第{{ index + 1 }}次</span>
          <div class="cycle_sub_item" v-if="pageType">
            <el-input
              v-model.number="item.month"
              size="small"
              placeholder="月"
              oninput="value = value.replace(/^(0+)|[^\d]+/g,'')"
              @input="(e) => inputMonth(e, index)"
              :disabled="isBindPlan"
            >
              <template #suffix>月</template>
            </el-input>
          </div>
          <div v-else>{{ item.month }}月</div>
          <div class="cycle_sub_item" v-if="pageType">
            <el-input
              v-model.number="item.day"
              size="small"
              placeholder="日"
              oninput="value = value.replace(/^(0+)|[^\d]+/g,'')"
              @input="(e) => inputDay(e, index)"
              :disabled="isBindPlan"
            >
              <template #suffix>日</template>
            </el-input>
          </div>
          <div v-else>{{ item.day }}日</div>
          <div class="cycle_sub_item" v-if="pageType">
            <el-input
              v-model.number="item.hour"
              size="small"
              placeholder="时"
              oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
              @input="(e) => inputHour(e, index)"
              :disabled="isBindPlan"
            >
              <template #suffix>时</template>
            </el-input>
          </div>
          <div v-else>{{ item.hour }}时</div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      formData: {
        type: Object,
        default: () => {
          return {};
        }
      },
      // 编辑edit和新增add
      pageType: {
        type: String,
        default: ''
      },

      isBindPlan: {
        type: Boolean,
        default: () => {
          return false;
        }
      }
    },
    data() {
      return {
        ruleCycleList: [
          // {
          //   year: '', // 周期年
          //   month: '', // 周期月
          //   week: '', // 周期周
          //   day: '', // 周期日
          //   hour: '', // 周期时
          //   minute: '', // 周期分
          //   second: '' // 周期秒
          // }
        ],
        weekList: [
          { value: 1, label: '周一' },
          { value: 2, label: '周二' },
          { value: 3, label: '周三' },
          { value: 4, label: '周四' },
          { value: 5, label: '周五' },
          { value: 6, label: '周六' },
          { value: 7, label: '周日' }
        ],
        cycleOptObj: {
          1: '时/次',
          2: '天/次',
          //3: '周/次',
          4: '月/次',
          5: '年/次',
          11: '次/天',
          //12: '次/周',
          13: '次/月',
          14: '次/年'
        },
        cycleOpt: [
          { code: 1, label: '时/次' },
          { code: 2, label: '天/次' },
          //{ code: 3, label: '周/次' },
          { code: 4, label: '月/次' },
          { code: 5, label: '年/次' },
          { code: 11, label: '次/天' },
          //{ code: 12, label: '次/周' },
          { code: 13, label: '次/月' },
          { code: 14, label: '次/年' }
        ]
      };
    },
    watch: {
      formData(val) {
        console.log(val.cycle);
        if (val.cycle) {
          this.ruleCycleList = val.cycle;
        }
      }
    },
    methods: {
      // 巡点检周期输入数量
      cycleValueChange(val) {
        console.log(val);
        console.log(this.formData.cycleType);
        const cycleType01 = [1, 2, 4, 5];
        const cycleType02 = [11, 13, 14];
        this.ruleCycleList = [];

        // 次在后
        console.log(cycleType01.includes(this.formData.cycleType));
        if (cycleType01.includes(this.formData.cycleType)) {
          this.ruleCycleList.push({
            month: 1, // 周期月
            day: 1, // 周期日
            hour: 0, // 周期时
            minute: 0 // 周期分
          });
          console.log(this.ruleCycleList);
        }

        // 次在前
        if (cycleType02.includes(this.formData.cycleType)) {
          for (let i = 0; i < val; i++) {
            this.ruleCycleList.push({
              month: 1, // 周期月
              day: 1, // 周期日
              hour: 0, // 周期时
              minute: 0 // 周期分
            });
          }
        }

        // 时/次
        if (this.formData.cycleType === 1) {
          this.ruleCycleList.forEach((item) => {
            delete item.month;
            delete item.day;
            delete item.hour;
          });
        }

        console.log(this.ruleCycleList);
        // 天/次、次/天
        if ([2, 11].includes(this.formData.cycleType)) {
          this.ruleCycleList.forEach((item) => {
            delete item.month;
            delete item.day;
          });
        }
        // 月/次、次/月
        if ([4, 13].includes(this.formData.cycleType)) {
          this.ruleCycleList.forEach((item) => {
            delete item.month;
          });
        }
      },

      // 周期类型选择
      handleCycleTypeChange() {
        this.cycleValueChange(this.formData.cycleValue);
      },

      // 输入月
      inputMonth(e, index) {
        if (e > 12) {
          this.ruleCycleList[index].month = 1;
          return this.$message.warning('月份最大值为12月');
        }
      },
      // 输入日
      inputDay(e, index) {
        if (e > 31) {
          this.ruleCycleList[index].day = 1;
          return this.$message.warning('日期最大值为31日');
        }
      },
      // 输入时
      inputHour(e, index) {
        if (e > 23) {
          this.ruleCycleList[index].hour = 0;
          return this.$message.warning('时间最大值为23时');
        }
      },
      // 输入时
      inputMinute(e, index) {
        if (e > 59) {
          this.ruleCycleList[index].minute = 0;
          return this.$message.warning('分钟最大值为59分');
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .cycle_item {
    display: flex;
    align-items: center;
    color: #666;
    > span {
      width: 50px;
    }
    .cycle_sub_item {
      flex: 1;
      display: flex;
      align-items: center;
    }
  }
  .cycle01_box {
    display: flex;
    ::v-deep .el-input {
      width: 80px;
    }
  }
  .cycle_time_column {
    display: flex;
  }
</style>