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

<template>
  <div>
    <el-row :gutter="24" v-if="pageType">
      <el-col :span="4">
        <el-input
          @input="
            (value) =>
              (formData.frequencyValue = value.replace(/^(0+)|[^\d]+/g, ''))
          "
          class="cycle_value"
          size="small"
          v-model.number="formData.frequencyValue"
          @change="cycleValueChange"
          placeholder="请输入"
          :disabled="isBindPlan"
          maxlength="3"
        ></el-input>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="formData.frequencyUnit"
          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.frequencyUnit)">
        <div
          v-for="(item, index) in recordRulesCycleList"
          :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.frequencyUnit)"
            :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.frequencyUnit)"
            :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.frequencyUnit)"
            :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.frequencyValue
          }}{{ cycleOptObj[formData.frequencyUnit] }}</span
        >
        <div v-if="[1, 2, 4, 5].includes(formData.frequencyUnit)">
          <span v-if="[5].includes(formData.frequencyUnit)"
            >{{ recordRulesCycleList[0].month }}月</span
          >
          <span v-if="[4, 5].includes(formData.frequencyUnit)"
            >{{ recordRulesCycleList[0].day }}日</span
          >
          <span v-if="[2, 4, 5].includes(formData.frequencyUnit)"
            >{{ recordRulesCycleList[0].hour }}时</span
          >
          <span>{{ recordRulesCycleList[0].minute }}分</span>
        </div>
      </el-col>
    </el-row>

    <!-- 根据周期类型展示时间组件 11,12,13,14 -->
    <div>
      <!-- 次/天 -->
      <el-row :gutter="20" v-if="formData.frequencyUnit === 11">
        <el-col
          v-for="(item, index) in recordRulesCycleList"
          :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.frequencyUnit === 12">
        <el-col
          v-for="(item, index) in recordRulesCycleList"
          :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.frequencyUnit === 13">
        <el-col
          v-for="(item, index) in recordRulesCycleList"
          :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.frequencyUnit === 14">
        <el-col
          v-for="(item, index) in recordRulesCycleList"
          :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 {
        // {
        //   year: '', // 周期年
        //   month: '', // 周期月
        //   week: '', // 周期周
        //   day: '', // 周期日
        //   hour: '', // 周期时
        //   minute: '', // 周期分
        //   second: '' // 周期秒
        // }
        recordRulesCycleList: [],
        weekList: [
          { value: 1, label: '周一' },
          { value: 2, label: '周二' },
          { value: 3, label: '周三' },
          { value: 4, label: '周四' },
          { value: 5, label: '周五' },
          { value: 6, label: '周六' },
          { value: 7, label: '周日' }
        ],
        cycleOptObj: {
          0: '次数',
          1: '时/次',
          2: '天/次',
          //3: '周/次',
          4: '月/次',
          5: '年/次',
          11: '次/天',
          //12: '次/周',
          13: '次/月',
          14: '次/年'
        },
        cycleOpt: [
          { code: 0, label: '次数' },
          { 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: {
        handler(val) {
          if (val.recordRulesCycleList) {
            this.recordRulesCycleList = val.recordRulesCycleList;
          }
        },
        // deep: true,
        // immediate: true
      }
    },
    methods: {
      setRecordRulesCycleList(list) {
        this.recordRulesCycleList = list;
      },
      // 巡点检周期输入数量
      cycleValueChange(val) {
        console.log(val);
        console.log(this.formData.frequencyUnit);
        const cycleType01 = [1, 2, 4, 5];
        const cycleType02 = [11, 13, 14];
        this.recordRulesCycleList = [];

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

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

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

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

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

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

<style lang="scss" scoped>
  :deep(.el-input) {
    // width:100px;
  }
  .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>