|
|
@@ -0,0 +1,508 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-row :gutter="24" v-if="pageType">
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-input
|
|
|
+ @input="
|
|
|
+ (value) =>
|
|
|
+ (formData.cycleValue = value.replace(/^(0+)|[^\d]+/g, ''))
|
|
|
+ "
|
|
|
+ class="cycle_value"
|
|
|
+ size="small"
|
|
|
+ v-model.number="formData.cycleValue"
|
|
|
+ @change="cycleValueChange"
|
|
|
+ placeholder="请输入"
|
|
|
+ :disabled="isBindPlan"
|
|
|
+ maxlength="3"
|
|
|
+ ></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <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, 3, 4, 5].includes(formData.cycleType)">
|
|
|
+ <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.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>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="[3].includes(formData.cycleType)"
|
|
|
+ style="display: flex"
|
|
|
+ >
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <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, 3, 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)"
|
|
|
+ >{{ recordRulesCycleList[0].month }}月</span
|
|
|
+ >
|
|
|
+ <span v-if="[4, 5].includes(formData.cycleType)"
|
|
|
+ >{{ recordRulesCycleList[0].day }}日</span
|
|
|
+ >
|
|
|
+ <span v-if="[2, 4, 5].includes(formData.cycleType)"
|
|
|
+ >{{ 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.cycleType === 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.cycleType === 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.cycleType === 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.cycleType === 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: '次数',
|
|
|
+ 6: '分/次',
|
|
|
+ 1: '时/次',
|
|
|
+ 2: '天/次',
|
|
|
+ 3: '周/次',
|
|
|
+ 4: '月/次',
|
|
|
+ 5: '年/次',
|
|
|
+ 11: '次/天',
|
|
|
+ 12: '次/周',
|
|
|
+ 13: '次/月',
|
|
|
+ 14: '次/年'
|
|
|
+ },
|
|
|
+ cycleOpt: [
|
|
|
+ { code: 0, label: '次数' },
|
|
|
+ { code: 6, 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: '次/年' }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setRecordRulesCycleList(list) {
|
|
|
+ console.log('list', list);
|
|
|
+ this.recordRulesCycleList = list;
|
|
|
+ },
|
|
|
+ // 巡点检周期输入数量
|
|
|
+ cycleValueChange(val) {
|
|
|
+ console.log(val);
|
|
|
+ console.log(this.formData.cycleType);
|
|
|
+ const cycleType01 = [1, 2, 3, 4, 5];
|
|
|
+ const cycleType02 = [11, 12, 13, 14];
|
|
|
+ this.recordRulesCycleList = [];
|
|
|
+
|
|
|
+ // 次在后
|
|
|
+ console.log(cycleType01.includes(this.formData.cycleType));
|
|
|
+ if (cycleType01.includes(this.formData.cycleType)) {
|
|
|
+ this.recordRulesCycleList.push({
|
|
|
+ month: 1, // 周期月
|
|
|
+ day: 1, // 周期日
|
|
|
+ hour: 0, // 周期时
|
|
|
+ minute: 0, // 周期分
|
|
|
+ week: 1 // 周期周
|
|
|
+ });
|
|
|
+ console.log(this.recordRulesCycleList);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 次在前
|
|
|
+ if (cycleType02.includes(this.formData.cycleType)) {
|
|
|
+ for (let i = 0; i < val; i++) {
|
|
|
+ this.recordRulesCycleList.push({
|
|
|
+ month: 1, // 周期月
|
|
|
+ day: 1, // 周期日
|
|
|
+ hour: 0, // 周期时
|
|
|
+ minute: 0, // 周期分
|
|
|
+ week: 1 // 周期周
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 时/次
|
|
|
+ if (this.formData.cycleType === 1) {
|
|
|
+ this.recordRulesCycleList.forEach((item) => {
|
|
|
+ delete item.month;
|
|
|
+ delete item.day;
|
|
|
+ delete item.hour;
|
|
|
+ delete item.week;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(this.recordRulesCycleList);
|
|
|
+ // 天/次、次/天
|
|
|
+ if ([2, 11].includes(this.formData.cycleType)) {
|
|
|
+ this.recordRulesCycleList.forEach((item) => {
|
|
|
+ delete item.month;
|
|
|
+ delete item.day;
|
|
|
+ delete item.week;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 周/次 次/周
|
|
|
+ if ([3, 12].includes(this.formData.cycleType)) {
|
|
|
+ this.recordRulesCycleList.forEach((item) => {
|
|
|
+ delete item.month;
|
|
|
+ delete item.day;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 月/次、次/月
|
|
|
+ if ([4, 13].includes(this.formData.cycleType)) {
|
|
|
+ this.recordRulesCycleList.forEach((item) => {
|
|
|
+ delete item.month;
|
|
|
+ delete item.week;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 周期类型选择
|
|
|
+ handleCycleTypeChange() {
|
|
|
+ this.cycleValueChange(this.formData.cycleValue);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 输入月
|
|
|
+ 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>
|