记录规则周期功能修改

src/api/recordrules/index.js

@@ -89,3 +89,12 @@ export async function recordrulesUpdateVersion(body) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+// 记录规则周期表分页查询 /main/recordrulescycle/page
+export async function recordrulesCyclePage(body) {
+  const res = await request.post(`/main/recordrulescycle/page`, body);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/views/rulesManagement/releaseRules/components/permitAdd.vue

@@ -85,34 +85,6 @@
             />
           </el-form-item>
         </el-col>
-        <el-col :span="8">
-          <el-col :span="12">
-            <el-form-item label="周期" required prop="frequencyValue">
-              <el-input
-                class="cycle_value"
-                size="small"
-                v-model.number="formData.frequencyValue"
-                placeholder="请输入频率数值"
-              ></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item required prop="frequencyUnit" label-width="0">
-              <el-select
-                v-model="formData.frequencyUnit"
-                size="small"
-                placeholder="请选择频率单位"
-              >
-                <el-option
-                  v-for="item in recordRulesFrequency"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-col>
         <el-col v-if="formData.classify == 3" :span="8">
           <el-form-item label="关联设备" prop="deviceName" required>
             <el-input
@@ -129,6 +101,15 @@
             </el-input>
           </el-form-item>
         </el-col>
+        <el-col :span="24">
+          <el-form-item label="周期" prop="frequencyValue" required>
+            <rule-cycle
+              ref="cycleMultipleRef"
+              :formData="formData"
+              pageType="add"
+            />
+          </el-form-item>
+        </el-col>
       </el-row>
       <ele-pro-table
         ref="table"
@@ -330,7 +311,8 @@
     recordrulesUpdate,
     recordrulesPublish,
     recordrulesSaveAndPublish,
-    recordrulesUpdateVersion
+    recordrulesUpdateVersion,
+    recordrulesCyclePage
   } from '@/api/recordrules/index';
 
   export default {
@@ -440,7 +422,7 @@
           classify: null,
           deviceId: null,
           deviceName: '',
-          frequencyUnit: null,
+          frequencyUnit: 2,
           frequencyValue: null,
           name: '',
           recordRulesDetailList: [
@@ -457,6 +439,7 @@
               unitName: null
             }
           ],
+          recordRulesCycleList: [],
           startDate: null,
           stopDate: null,
           version: 1,
@@ -468,7 +451,8 @@
             { required: true, message: '请输入规则名称', trigger: 'blur' }
           ],
           frequencyValue: [
-            { required: true, message: '请输入频率数值', trigger: 'blur' }
+            { required: true, message: '请选择周期', trigger: 'blur' },
+            { required: true, message: '请选择周期', trigger: 'change' }
           ],
           frequencyUnit: [
             { required: true, message: '请选择频率单位', trigger: 'change' }
@@ -495,22 +479,11 @@
         dataIndex: null,
         showEdit: false,
         btnLoading: false,
-        recordRulesFrequency: [],
         currentRow: null
       };
     },
     mounted() {
       this.getByCodeData();
-
-      this.requestDict('记录规则频率').then(() => {
-        if (this.$store.state.dict['record_rules_frequency']) {
-          this.recordRulesFrequency = this.$store.state.dict[
-            'record_rules_frequency'
-          ].map((i) => {
-            return { label: i.dictValue, value: Number(i.dictCode) };
-          });
-        }
-      });
     },
     methods: {
       open(row, type, title) {
@@ -526,6 +499,7 @@
           this.formData.stopDate = new Date(row.stopDate);
 
           this.recordrulesDetailPage(row);
+          this.recordrulesCyclePage(row);
 
           console.log('this.formData', this.formData, this.formData.version);
         }
@@ -542,6 +516,7 @@
           this.formData.stopDate = new Date('2099-12-31 00:00:00');
 
           this.recordrulesDetailPage(row);
+          this.recordrulesCyclePage(row);
         }
 
         if (type == 'add') {
@@ -562,25 +537,6 @@
         });
         this.recordSheet = list;
       },
-      // 保存数据
-      save(data, idx) {
-        if (idx || idx === 0) {
-          this.$set(this.formData.recordRulesDetailList, idx, data);
-        } else {
-          this.formData.recordRulesDetailList.push(data);
-        }
-        console.log(
-          'this.formData.recordRulesDetailList',
-          this.formData.recordRulesDetailList
-        );
-      },
-      edit(row, index) {
-        this.current = row;
-        this.dataIndex = index;
-        this.showEdit = true;
-        this.$refs.userEdit.$refs.form &&
-          this.$refs.userEdit.$refs.form.clearValidate();
-      },
       itemDel(index) {
         this.formData.recordRulesDetailList.splice(index, 1);
       },
@@ -614,6 +570,7 @@
               tools: []
             }
           ],
+          recordRulesCycleList: [],
           startDate: null,
           stopDate: null,
           version: 1,
@@ -637,6 +594,13 @@
           try {
             this.btnLoading = true;
 
+            this.formData.recordRulesCycleList =
+              this.$refs.cycleMultipleRef.recordRulesCycleList.map(
+                (i, index) => {
+                  return { ...i, sortNum: index + 1 };
+                }
+              );
+
             const body = { ...this.formData };
 
             body.startDate = this.$util.toDateString(
@@ -682,6 +646,12 @@
 
           try {
             this.btnLoading = true;
+            this.formData.recordRulesCycleList =
+              this.$refs.cycleMultipleRef.recordRulesCycleList.map(
+                (i, index) => {
+                  return { ...i, sortNum: index + 1 };
+                }
+              );
 
             const body = { ...this.formData };
 
@@ -790,6 +760,20 @@
       // 清空工具
       clearTool(row) {
         row.tools = [];
+      },
+      // 查询 recordrulesCyclePage
+      async recordrulesCyclePage(row) {
+        const { list } = await recordrulesCyclePage({
+          pageNum: 1,
+          size: 9999,
+          recordRulesId: row.id,
+          orderBy: 'descending'
+        });
+        console.log('list 周期数据', list);
+        this.formData.recordRulesCycleList = list;
+        this.$nextTick(() => {
+          this.$refs.cycleMultipleRef.setRecordRulesCycleList(list);
+        });
       }
     }
   };

src/views/rulesManagement/releaseRules/components/rule-cycle.vue

@@ -1,23 +1,24 @@
 <template>
   <div>
-    <el-row :gutter="8" v-if="pageType">
-      <el-col :span="2">
-        <!-- @input="
-            (value) =>
-              (formData.cycleValue = value.replace(/^(0+)|[^\d]+/g, ''))
-          " -->
+    <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.cycleValue"
+          v-model.number="formData.frequencyValue"
           @change="cycleValueChange"
           placeholder="请输入"
-          :disabled="isBindPlan || formData.cycleType == 1"
+          :disabled="isBindPlan"
+          maxlength="3"
         ></el-input>
       </el-col>
-      <el-col :span="3">
+      <el-col :span="4">
         <el-select
-          v-model="formData.cycleType"
+          v-model="formData.frequencyUnit"
           size="small"
           @change="handleCycleTypeChange"
           :disabled="isBindPlan"
@@ -25,15 +26,15 @@
           <el-option
             v-for="item in cycleOpt"
             :key="item.code"
-            :label="item.desc"
+            :label="item.label"
             :value="item.code"
           ></el-option>
         </el-select>
       </el-col>
 
-      <el-col :span="8" v-if="[2, 3, 4, 5].includes(formData.cycleType)">
+      <el-col :span="8" v-if="[1, 2, 4, 5].includes(formData.frequencyUnit)">
         <div
-          v-for="(item, index) in ruleCycleList"
+          v-for="(item, index) in recordRulesCycleList"
           :key="index"
           class="cycle01_box"
         >
@@ -42,7 +43,7 @@
             size="small"
             oninput="value = value.replace(/^(0+)|[^\d]+/g,'')"
             @input="(e) => inputMonth(e, index)"
-            v-if="[5].includes(formData.cycleType)"
+            v-if="[5].includes(formData.frequencyUnit)"
             :disabled="isBindPlan"
           >
             <template #suffix>月</template>
@@ -53,7 +54,7 @@
             size="small"
             oninput="value = value.replace(/^(0+)|[^\d]+/g,'')"
             @input="(e) => inputDay(e, index)"
-            v-if="[4, 5].includes(formData.cycleType)"
+            v-if="[4, 5].includes(formData.frequencyUnit)"
             :disabled="isBindPlan"
           >
             <template #suffix>日</template>
@@ -64,7 +65,7 @@
             size="small"
             oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
             @input="(e) => inputHour(e, index)"
-            v-if="[3, 4, 5].includes(formData.cycleType)"
+            v-if="[2, 4, 5].includes(formData.frequencyUnit)"
             :disabled="isBindPlan"
           >
             <template #suffix>时</template>
@@ -85,19 +86,20 @@
     <el-row v-else>
       <el-col :span="24" class="cycle_time_column">
         <span style="margin-right: 20px"
-          >{{ formData.cycleValue }}{{ cycleOptObj[formData.cycleType] }}</span
+          >{{ formData.frequencyValue
+          }}{{ cycleOptObj[formData.frequencyUnit] }}</span
         >
-        <div v-if="[2, 3, 4, 5].includes(formData.cycleType)">
-          <span v-if="[5].includes(formData.cycleType)"
-            >{{ ruleCycleList[0].month }}月</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.cycleType)"
-            >{{ ruleCycleList[0].day }}日</span
+          <span v-if="[4, 5].includes(formData.frequencyUnit)"
+            >{{ recordRulesCycleList[0].day }}日</span
           >
-          <span v-if="[3, 4, 5].includes(formData.cycleType)"
-            >{{ ruleCycleList[0].hour }}时</span
+          <span v-if="[2, 4, 5].includes(formData.frequencyUnit)"
+            >{{ recordRulesCycleList[0].hour }}时</span
           >
-          <span>{{ ruleCycleList[0].minute }}分</span>
+          <span>{{ recordRulesCycleList[0].minute }}分</span>
         </div>
       </el-col>
     </el-row>
@@ -105,9 +107,9 @@
     <!-- 根据周期类型展示时间组件 11,12,13,14 -->
     <div>
       <!-- 次/天 -->
-      <el-row :gutter="20" v-if="formData.cycleType === 6">
+      <el-row :gutter="20" v-if="formData.frequencyUnit === 11">
         <el-col
-          v-for="(item, index) in ruleCycleList"
+          v-for="(item, index) in recordRulesCycleList"
           :key="index"
           :span="6"
           class="cycle_item"
@@ -144,9 +146,9 @@
         </el-col>
       </el-row>
       <!-- 次/周 -->
-      <el-row :gutter="20" v-else-if="formData.cycleType === 12">
+      <el-row :gutter="20" v-else-if="formData.frequencyUnit === 12">
         <el-col
-          v-for="(item, index) in ruleCycleList"
+          v-for="(item, index) in recordRulesCycleList"
           :key="index"
           :span="6"
           class="cycle_item"
@@ -184,9 +186,9 @@
         </el-col>
       </el-row>
       <!-- 次/月 -->
-      <el-row :gutter="20" v-else-if="formData.cycleType === 7">
+      <el-row :gutter="20" v-else-if="formData.frequencyUnit === 13">
         <el-col
-          v-for="(item, index) in ruleCycleList"
+          v-for="(item, index) in recordRulesCycleList"
           :key="index"
           :span="6"
           class="cycle_item"
@@ -221,9 +223,9 @@
         </el-col>
       </el-row>
       <!-- 次/年 -->
-      <el-row :gutter="20" v-else-if="formData.cycleType === 8">
+      <el-row :gutter="20" v-else-if="formData.frequencyUnit === 14">
         <el-col
-          v-for="(item, index) in ruleCycleList"
+          v-for="(item, index) in recordRulesCycleList"
           :key="index"
           :span="6"
           class="cycle_item"
@@ -275,7 +277,6 @@
 </template>
 
 <script>
-  import { frequencyUnitList } from '@/api/releasePermitRules/index';
   export default {
     props: {
       formData: {
@@ -299,17 +300,16 @@
     },
     data() {
       return {
-        ruleCycleList: [
-          // {
-          //   year: '', // 周期年
-          //   month: '', // 周期月
-          //   week: '', // 周期周
-          //   day: '', // 周期日
-          //   hour: '', // 周期时
-          //   minute: '', // 周期分
-          //   second: '' // 周期秒
-          // }
-        ],
+        // {
+        //   year: '', // 周期年
+        //   month: '', // 周期月
+        //   week: '', // 周期周
+        //   day: '', // 周期日
+        //   hour: '', // 周期时
+        //   minute: '', // 周期分
+        //   second: '' // 周期秒
+        // }
+        recordRulesCycleList: [],
         weekList: [
           { value: 1, label: '周一' },
           { value: 2, label: '周二' },
@@ -320,74 +320,70 @@
           { value: 7, label: '周日' }
         ],
         cycleOptObj: {
-          1: '次',
-          2: '时/次',
-          3: '天/次',
+          0: '次数',
+          1: '时/次',
+          2: '天/次',
           //3: '周/次',
           4: '月/次',
           5: '年/次',
-          6: '次/天',
+          11: '次/天',
           //12: '次/周',
-          7: '次/月',
-          8: '次/年'
+          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: '次/年' }
-        ],
-        // frequencyUnit:{}
+          { 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(val) {
-        if (val.cycle) {
-          this.ruleCycleList = val.cycle;
-        }
+      formData: {
+        handler(val) {
+          if (val.recordRulesCycleList) {
+            this.recordRulesCycleList = val.recordRulesCycleList;
+          }
+        },
+        // deep: true,
+        // immediate: true
       }
     },
-    mounted() {
-      this.getFrequency();
-    },
     methods: {
-      async getFrequency() {
-        try {
-          const res = await frequencyUnitList();
-          // let list = res.map((item) => {
-          //   return {
-          //     code: item.code,
-          //     label: item.desc
-          //   };
-          // });
-          this.cycleOpt = res;
-        } catch (err) {}
+      setRecordRulesCycleList(list) {
+        this.recordRulesCycleList = list;
       },
       // 巡点检周期输入数量
       cycleValueChange(val) {
-        const cycleType01 = [2, 3, 4, 5];
-        const cycleType02 = [6, 7, 8];
-        this.ruleCycleList = [];
+        console.log(val);
+        console.log(this.formData.frequencyUnit);
+        const cycleType01 = [1, 2, 4, 5];
+        const cycleType02 = [11, 13, 14];
+        this.recordRulesCycleList = [];
 
         // 次在后
-        if (cycleType01.includes(this.formData.cycleType)) {
-          this.ruleCycleList.push({
+        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.cycleType)) {
+        if (cycleType02.includes(this.formData.frequencyUnit)) {
           for (let i = 0; i < val; i++) {
-            this.ruleCycleList.push({
+            this.recordRulesCycleList.push({
               month: 1, // 周期月
               day: 1, // 周期日
               hour: 0, // 周期时
@@ -397,65 +393,60 @@
         }
 
         // 时/次
-        if (this.formData.cycleType === 1) {
-          this.ruleCycleList.forEach((item) => {
+        if (this.formData.frequencyUnit === 1) {
+          this.recordRulesCycleList.forEach((item) => {
             delete item.month;
             delete item.day;
             delete item.hour;
           });
         }
 
+        console.log(this.recordRulesCycleList);
         // 天/次、次/天
-        if ([3, 6].includes(this.formData.cycleType)) {
-          this.ruleCycleList.forEach((item) => {
+        if ([2, 11].includes(this.formData.frequencyUnit)) {
+          this.recordRulesCycleList.forEach((item) => {
             delete item.month;
             delete item.day;
           });
         }
         // 月/次、次/月
-        if ([4, 7].includes(this.formData.cycleType)) {
-          this.ruleCycleList.forEach((item) => {
+        if ([4, 13].includes(this.formData.frequencyUnit)) {
+          this.recordRulesCycleList.forEach((item) => {
             delete item.month;
           });
         }
       },
 
       // 周期类型选择
-      handleCycleTypeChange(val) {
-        // this.frequencyUnit = this.cycleOpt.find((el)=>el.code == val)
-        if (val == 1) {
-          this.$set(this.formData, 'cycleValue', 1);
-          // this.formData.cycleValue = 1;
-        }
-        // console.log(val,'val');
-        this.cycleValueChange(this.formData.cycleValue);
+      handleCycleTypeChange() {
+        this.cycleValueChange(this.formData.frequencyValue);
       },
 
       // 输入月
       inputMonth(e, index) {
         if (e > 12) {
-          this.ruleCycleList[index].month = 1;
+          this.recordRulesCycleList[index].month = 1;
           return this.$message.warning('月份最大值为12月');
         }
       },
       // 输入日
       inputDay(e, index) {
         if (e > 31) {
-          this.ruleCycleList[index].day = 1;
+          this.recordRulesCycleList[index].day = 1;
           return this.$message.warning('日期最大值为31日');
         }
       },
       // 输入时
       inputHour(e, index) {
         if (e > 23) {
-          this.ruleCycleList[index].hour = 0;
+          this.recordRulesCycleList[index].hour = 0;
           return this.$message.warning('时间最大值为23时');
         }
       },
       // 输入时
       inputMinute(e, index) {
         if (e > 59) {
-          this.ruleCycleList[index].minute = 0;
+          this.recordRulesCycleList[index].minute = 0;
           return this.$message.warning('分钟最大值为59分');
         }
       }
@@ -464,6 +455,9 @@
 </script>
 
 <style lang="scss" scoped>
+  :deep(.el-input) {
+    // width:100px;
+  }
   .cycle_item {
     display: flex;
     align-items: center;