chore: 优化规则条件

src/assets/styles/rule.scss

@@ -10,7 +10,7 @@
   }
   .el-select,
   .el-input {
-    width: 120px;
+    width: 130px;
   }
 }
 .rule-operator {

src/components/rule/EventRule.vue

@@ -90,6 +90,10 @@ function handleOperateChange(value: string, item: RuleAttr) {
   const found = getOperatorList(item.attr_type).find(item => item.value === value)
   item.operate_name = found?.label || ''
   item.value = ''
+  // 区间
+  if (value === 'range') {
+    item.value = { start: undefined, end: undefined }
+  }
 }
 
 // 触发条件改变
@@ -165,8 +169,45 @@ function handleTriggerOperateChange(value: string, item: EventRuleItem) {
                       :value="option.value"></el-option>
                   </el-select>
                 </el-form-item>
-                <el-form-item>
-                  <el-input v-model="attr.value" />
+                <el-form-item v-if="!['null', 'not null'].includes(attr.operate)">
+                  <!-- 数字区间 -->
+                  <template v-if="['2', '3'].includes(attr.attr_type) && attr.operate === 'range'">
+                    <el-input-number step-strictly :controls="false" :min="0" v-model="attr.value.start" />
+                    <el-input-number step-strictly :controls="false" :min="0" v-model="attr.value.end" />
+                  </template>
+                  <!-- 日期区间 -->
+                  <template v-else-if="attr.attr_type === '4' && attr.operate === 'range'">
+                    <el-date-picker v-model="attr.value.start" type="date" value-format="YYYY-MM-DD" />
+                    <el-date-picker v-model="attr.value.end" type="date" value-format="YYYY-MM-DD" />
+                  </template>
+                  <!-- 时间区间 -->
+                  <template v-else-if="attr.attr_type === '5' && attr.operate === 'range'">
+                    <el-date-picker
+                      v-model="attr.value.start"
+                      type="datetime"
+                      value-format="YYYY-MM-DD HH:mm:ss"
+                      style="width: 180px" />
+                    <el-date-picker
+                      v-model="attr.value.end"
+                      type="datetime"
+                      value-format="YYYY-MM-DD HH:mm:ss"
+                      style="width: 180px" />
+                  </template>
+                  <template
+                    v-else-if="attr.attr_type === '4' && (attr.operate === 'after' || attr.operate === 'before')">
+                    <el-date-picker v-model="attr.value" type="date" value-format="YYYY-MM-DD" />
+                  </template>
+                  <template
+                    v-else-if="attr.attr_type === '5' && (attr.operate === 'after' || attr.operate === 'before')">
+                    <el-date-picker
+                      v-model="attr.value"
+                      type="datetime"
+                      value-format="YYYY-MM-DD HH:mm:ss"
+                      style="width: 180px" />
+                  </template>
+                  <template v-else>
+                    <el-input v-model="attr.value" />
+                  </template>
                 </el-form-item>
               </div>
               <el-button

src/components/rule/UserRule.vue

@@ -53,6 +53,10 @@ function handleOperateChange(value: string, item: RuleAttr) {
   const found = getOperatorList(item.attr_type).find(item => item.value === value)
   item.operate_name = found?.label || ''
   item.value = ''
+  // 区间
+  if (value === 'range') {
+    item.value = { start: undefined, end: undefined }
+  }
 }
 </script>
 
@@ -87,8 +91,43 @@ function handleOperateChange(value: string, item: RuleAttr) {
                   :value="option.value"></el-option>
               </el-select>
             </el-form-item>
-            <el-form-item>
-              <el-input v-model="item.value" />
+            <el-form-item v-if="!['null', 'not null'].includes(item.operate)">
+              <!-- 数字区间 -->
+              <template v-if="['2', '3'].includes(item.attr_type) && item.operate === 'range'">
+                <el-input-number step-strictly :controls="false" :min="0" v-model="item.value.start" />
+                <el-input-number step-strictly :controls="false" :min="0" v-model="item.value.end" />
+              </template>
+              <!-- 日期区间 -->
+              <template v-else-if="item.attr_type === '4' && item.operate === 'range'">
+                <el-date-picker v-model="item.value.start" type="date" value-format="YYYY-MM-DD" />
+                <el-date-picker v-model="item.value.end" type="date" value-format="YYYY-MM-DD" />
+              </template>
+              <!-- 时间区间 -->
+              <template v-else-if="item.attr_type === '5' && item.operate === 'range'">
+                <el-date-picker
+                  v-model="item.value.start"
+                  type="datetime"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  style="width: 180px" />
+                <el-date-picker
+                  v-model="item.value.end"
+                  type="datetime"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  style="width: 180px" />
+              </template>
+              <template v-else-if="item.attr_type === '4' && (item.operate === 'after' || item.operate === 'before')">
+                <el-date-picker v-model="item.value" type="date" value-format="YYYY-MM-DD" />
+              </template>
+              <template v-else-if="item.attr_type === '5' && (item.operate === 'after' || item.operate === 'before')">
+                <el-date-picker
+                  v-model="item.value"
+                  type="datetime"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  style="width: 180px" />
+              </template>
+              <template v-else>
+                <el-input v-model="item.value" />
+              </template>
             </el-form-item>
           </div>
           <el-button text :icon="CloseBold" @click="handleRemove(userAttrRule.items, index)"></el-button>

src/types.ts

@@ -82,7 +82,7 @@ export interface RuleAttr {
   attr_type: string
   operate: string
   operate_name: string
-  value: string
+  value: any
 }
 
 // 事件规则
@@ -121,4 +121,4 @@ export interface MaterialProp {
   status_name: string
   status: string
   isView: boolean
-}
\ No newline at end of file
+}

src/utils/dictionary.ts

@@ -79,10 +79,11 @@ export const numberOperatorList: OperatorType[] = [
 
 // 日期
 export const dateOperatorList: OperatorType[] = [
-  { label: '绝对时间前', value: 'before' },
-  { label: '绝对时间后', value: 'after' },
+  { label: '绝对时间之前', value: 'before' },
+  { label: '绝对时间之后', value: 'after' },
   { label: '绝对时间区间', value: 'range' },
-  { label: '相对时间点', value: '3' },
+  { label: '相对过去天数', value: 'relative_past_day' },
+  { label: '相对当前天数', value: 'relative_current_day' },
   { label: '在...天内', value: 'in_day' }
 ]